大家好，我是寒草😈，一只草系码猿🐒。间歇性热血🔥，持续性沙雕🌟
如果喜欢我的文章，可以关注➕ 点赞，与我一同成长吧～
我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛
国庆节，送大家一份礼物
序言 - 生活需要仪式感
大家好呀，我是你们的伙伴寒草🌿 ，中秋假期已经过去了，不知道大家有没有度过一个愉快的假期捏，诶，反正我是比较忙碌的，叹气😮💨 。我想大家现在过完中秋假期，肯定立马就开始期待国庆假期了，也会有很多朋友中秋因为时间原因并没有回家而是准备国庆回家见见亲人，我只能说，俺也一样，哈哈哈哈。
了解我的朋友知道，我是一个热爱生活的小伙子，我也想让那些有意义的日子更有仪式感，所以，还是想在这里为大家送上一份国庆礼物～
寒草小贴士🌿：生活需要仪式感
设计礼物就是要冥思苦想
那么问题来了，我给大家送个啥礼物呢，好难想啊，我想了很多主题：
- 五十六个民族五十六朵花
- 我和我的祖国一刻也不能分割
- 72岁生日快乐，我的祖国
但是我想，让内容更加活泼，符合我们祖国充满活力，欣欣向荣的发展势头。且必须包含一个元素：
- 五星红旗
我就开始百度各种国庆元素的图片素材，打算从中获取灵感，突然一张图片映入眼帘，那就是我在大学期间十分喜欢的一部动漫：《那年那兔那些事》
每只兔子都有一个大国梦
动漫讲的具体是啥我就不说了，毕竟我也是高冷的技术男孩，我开始想如果我拿h5+css搞出来一个这个不太现实，后来就想要不给大家画一幅吧，但是不对，我意识到问题并不简单：
我画画不好看！
完了，我画不出来，我只能用canvas弄一幅以假乱真了，我要手绘一幅那兔，就代表我需要提取出图片色域的边界，并且把边界绘制出来。
那么开始说思路，我对图片信息从上到下，从左到右两次扫描，遇到颜色值突变（进入了新的色块），以及遇到接近黑色的颜色（可能是描边或者颜色填充）就用黑色填充该点。
为什么要从上到下，从左到右扫描两次？
处理水平和垂直的线
下面看代码：
<!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;
}
</style>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
let myCanvas = document.getElementById("my-canvas");
let cxt = myCanvas.getContext("2d");
const natuImage = new Image();
natuImage.src = "natu.jpeg";
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;
cxt.fillStyle = "#ffffff";
cxt.fillRect(0, 0, width, height);
let currentR, currentG, currentB;
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 (Math.abs((r + g + b) - (currentR + currentG + currentB))> 65 || r + g +b < 95) {
cxt.fillStyle = `rgba(0, 0, 0, 1)`;
cxt.fillRect(w, h, 1, 1);
}
currentR = r;
currentG = g;
currentB = b;
}
}
for (let w = 0; w < width; w += 1) {
for (let h = 0; h < height; h += 1) {
let position = (width * h + w) * 4;
let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
if (Math.abs((r + g + b) - (currentR + currentG + currentB))> 65 || r + g +b < 95) {
cxt.fillStyle = `rgba(0, 0, 0, 1)`;
cxt.fillRect(w, h, 1, 1);
}
currentR = r;
currentG = g;
currentB = b;
}
}
}
</script>
</body>
</html>
就这样，寒草“手绘”的那兔就诞生了，在这里预祝大家国庆节快乐，也祝我们的祖国繁荣昌盛。
其实这个的处理能力已经还好了，比如给大家处理一下我的自拍：
如果大家需要定制，就改一下代码中的判断逻辑的数值就好～
结束语为什么这么长
我的梦
我的梦想是什么，其实这是一个很难回答的问题，疲惫下班，仰望星空，看人群汇集成河流，我也许是其中最平凡的一只，可是我依旧保持着年少那股天不怕地不怕我是男主角的中二气息。
我还是想去做更多非同凡响的事情，最近经常想着很多很多要去做的东西，之后就感觉有一双无形的手推着我前进前进，再前进。也会因为睡觉前想到一个好的点子激动的睡不好觉。
我之前的github组织留下 Just do creative things。没错，就是想去做有创造性的东西，我不太不甘于从当一枚螺丝钉到当一枚优秀的螺丝钉这样的进步，而是试图从一名工程师到一位创造者的进步，我想我的未来可能会充满：
- 失败
- 错误
- 迷失
- 重头再来
但是我想我应该不会怕，因为我已经经历很多这些事情了，我想我可以接受我失败，可以接受我坠入深渊，也可以接受几十年后依然一事无成，而我接受不了自己什么也不折腾，至少现在的我真的认为我在未来可以改变世界。
真的希望大家期待寒草未来的创意，更多的 hancao.design 已经在路上。
彩蛋&结束语 - 献给寒草未来的爱人
还有梦想里面要有爱情，期待淳朴的爱情到来，很简单，互相信任，互相依靠，一起经历，一起追逐，一起停靠，就很幸福。
代码已经很复杂了，爱要简单。
所以本文要实现的的效果还没有结束，下面是寒草的彩蛋作品：
《献给你五彩斑斓的春夏秋冬与蔚蓝的天，还有那漫天星河》
对不起我还没解决gif时间压缩的问题，效果就显得很急促
送予你彩色的春夏秋冬
送予你蔚蓝的天
送予你漫天星河
愿生活五彩斑斓🌈～
写在最后
最近看苹果《非同凡响》的广告词，很受鼓动，寒草的梦想，加油。
向那些疯狂的家伙们致敬
他们特立独行
他们桀骜不驯
他们惹是生非
他们格格不入
他们用与众不同的眼光看待事物
他们不喜欢墨守成规
他们也不愿安于现状
你可以赞美他们
引用他们
反对他们
质疑他们
颂扬或是诋毁他们
但唯独不能漠视他们
因为他们改变了事物
他们发明
他们想象
他们治愈
他们探索
他们创造
他们启迪
他们推动人类向前发展
也许，他们已经疯了
你能盯着白纸，就看到美妙的画作么？
你能静静坐着，就听见美妙的歌曲么？
你能凝视活性，就想到神奇的太空么？
我们为这些家伙制造良“机”
或许他们是别人眼里的疯子
但他们却是我们眼中的天才
因为只有那些疯狂到以为自己能够改变世界的人
才能真正的改变世界🌟
以及
未来的某一天
我想站在舞台中央
加我微信：hancao97，邀你进群，了解寒草🌿 的github小组现状，一起学习交流前端，成为更优秀的工程师～（因为群人数超过200了，没法扫码进群了，只能加微信哈）
