大家好，我是寒草😈，一只草系码猿🐒。间歇性热血🔥，持续性沙雕🌟
如果喜欢我的文章，可以关注➕ 点赞，与我一同成长吧～
前言
效果如头图，本文严肃
我是寒草，去年毕业的吉大计算机院本科生，因为疫情原因，没有一个很有仪式感的毕业典礼🎓，实属可惜，也算是我长久以来的遗憾，加上在学校上学时也经常听到黄大年老师的事迹，很受感触。
所以我发此文并出几年作品，主题有二：
- 母校 75 周年生日快乐
- 作为一个前端，用我的方式纪念黄大年老师
“振兴中华，乃我辈之责”这句话最开始我看到的时候属于震撼到了我，就像儿时的我看到周总理的“为中华之崛起而读书”，心潮澎湃。
我不在此多赘述黄大年的事迹了，如果大家感兴趣可以去自行查阅资料。
设计
这个设计其实很难做，我想要的几个元素是：
- 振兴中华，乃我辈之责
- 母校标志性建筑
- 校徽
代码实现
先是找图片资源，可惜网上没找到什么合适的照片，只有一个带有招生信息的图片，为了不影响大家阅读体验，我就给裁掉了，大家想象一下图片本来的样子吧。
没办法，我自己处理呗，也没事的～
需要处理的点是：
- 白天变成黑夜
- 去掉多余的东西（文字，白云）
- 天空中显示振兴中华，乃我辈之责这句话
- 展示校徽
之后就有了下面的代码，本文更多是纪念意义，实现我就少讲了，抱歉。
代码写的不好，但是还是贴给大家
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-art</title>
<style>
* {
margin: 0;
padding: 0;
}
.image {
position: absolute;
z-index: 999;
top: 0;
left: 0;
opacity: 0;
transition: 4s ease all;
}
</style>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
const imageUrl = "jida.jpg";
let myCanvas = document.getElementById("my-canvas");
let cxt = myCanvas.getContext("2d");
const jidaImage = new Image();
jidaImage.src = "logo.png";
jidaImage.onload = (ev) => {
let { height, width } = ev.path[0];
jidaImage.width = width;
jidaImage.height = height;
myCanvas.width = width;
myCanvas.height = height;
cxt.drawImage(jidaImage, 0, 0);
let imageData = cxt.getImageData(0, 0, width, height).data;
let list2 = [];
for (let h = 0; h < height; h += 1) {
for (let w = 0; w < width; w += 1) {
let position = (width * h + w) * 4;
let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
if (r + g + b < 700) {
list2.push({
h: h + 180,
w: w + 800
})
}
}
}
const image = new Image();
image.src = 'huangdanian.jpeg';
image.onload = (ev) => {
let { height, width } = ev.path[0];
image.width = width;
image.height = height;
myCanvas.width = width;
myCanvas.height = height;
cxt.drawImage(image, 0, 0);
let imageData = cxt.getImageData(0, 0, width, height).data;
let list = [];
for (let h = 0; h < height / 2; h += 1) {
for (let w = 0; w < width; w += 1) {
let position = (width * h + w) * 4;
let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
if (r + g + b < 700) {
list.push({
h: h + 200,
w: w + 1300
})
}
}
}
const natuImage = new Image();
natuImage.src = imageUrl;
natuImage.onload = (ev) => {
let { height, width } = ev.path[0];
natuImage.width = width;
natuImage.height = height;
myCanvas.width = width;
myCanvas.height = height;
cxt.drawImage(natuImage, 0, 0);
let imageData = cxt.getImageData(0, 0, width, height).data;
const hStart = Math.floor(height * 2 / 5);
for (let h = 0; h < height; h += 1) {
for (let w = 0; w < width; w += 1) {
let position = (width * h + w) * 4;
let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
const random = Math.random();
if (h > hStart && r + g + b < 420) {
cxt.fillStyle = `rgba(${r - 60}, ${g - 60}, ${b - 60}, 1)`;
cxt.fillRect(w, h, 1, 1);
} else {
if (random < 0.0001 && h <= hStart) {
cxt.fillStyle = `rgba(248, 236, 167, 1)`;
cxt.fillRect(w, h, 1, 1);
} else {
cxt.fillStyle = `rgba(0, ${20 - Math.floor(20 * h / height)}, ${50 - Math.floor(50 * h / height)}, 1)`;
cxt.fillRect(w, h, 1, 1);
}
}
}
}
for (const item of list) {
cxt.fillStyle = `rgba(248, 236, 167, 0.6)`;
cxt.fillRect(item.w, item.h, 1, 1);
}
for (const item of list2) {
cxt.fillStyle = `rgba(248, 236, 167, 0.6)`;
cxt.fillRect(item.w, item.h, 1, 1);
}
}
}
}
</script>
</body>
</html>
结束语
上图为地质宫
前行是最好的怀念
我辈吉人
继续努力
前辈毕业时留下的“振兴中华，乃我辈之责”给我们无限的激励，在此，我也留下一句：
“求实创新，励志图强，乃我辈吉人之风采。”
愿激情热血长存，同时也祝愿母校75岁生日快乐，感谢大家阅读。
