前言
圣诞快要来临了，几天前小包设想了一个巨好的创意(自我感觉自我感觉🎈)，但昨天中午突然灵光一动，有了新点子，圣诞前估计是不能预期交付了，那就元旦见吧~~~。
于是小包就改变了主意，大创意做不了，就来点小零头。本来想画个圣诞树，但顶不住圣诞树界实在太卷了，已经有诸多大佬绘制出各种奇思妙想的圣诞树，非常的好看，非常的炫酷。例如:
- 松花巨: 可爱圣诞树----html+css代码实现
- 海拥巨: 【程序员的浪漫】圣诞节到了，何不送给Ta一份程序员的浪漫
- 勇巨: 程序员也可以很浪漫！精选10个圣诞节特效网页设计-前端HTML+CSS等实现
- . . .
所以小包准备另辟蹊径，脱离树卷界，来实现一些圣诞的周边，比如雪人，麋鹿，以及给大家送上精心准备的糖果和小包的祝福语。本文核心是祝福，祝福大家开开心心、快快乐乐，高举不卷大旗，我辈义不容辞！
雪人
雪人主要由三部分组成: 树、雪人、雪花。
树是由简单三角形和矩形实现的，实现起来比较简单。
雪人也是由简单的图形构成的，但具体实现还是有几分趣味和可爱的，比如雪人的嘴唇其实就是字母 C 配合 -90deg 的旋转实现，雪人的小手配合 :before/:after 伪类实现。
雪花的实现没有借助 JS ，使用 animation 的 infinite 属性实现。
静态效果图
麋鹿
小包本来想模仿画一下麋鹿，但发现属实没有这本事啊，不止画不出来，连麋鹿都联想不出来💔。
麋鹿象征着吉祥，圣诞周边麋鹿可是必需品啊。因此小包找到一些巨佬绘制的麋鹿，送给大佬们，希望圣诞节那天，七彩麋鹿会拉着圣诞老人满足你所有的愿望。
麋鹿与圣诞老人
示例说明：三只麋鹿拉着圣诞老人在雪花中奔跑
示例来源: Merry Christmas
Gif 动态效果图
可爱麋鹿
示例说明：一只可可爱爱的小麋鹿
示例来源: the red-nosed reindeer
静态效果图
呆呆麋鹿
示例说明：一只呆呆萌萌的小麋鹿
示例来源: CSS Rudolph
静态效果图
炫酷麋鹿
示例说明：基于SVG实现的炫酷麋鹿
示例来源: crazyLowPolyDeer
Gif 动态效果图
糖果
糖果是小包在文字粒子的基础上实现的，图片选取了一张小包特别喜欢的，糖果比较多的图片，通过粒子组装完成。
实现思路
图片例子与文字粒子实现大同小异，核心在于副画布由绘制文字修改为绘制图片，主要难点在于处理图片，一方面图片存在跨域问题，需要设置 image.crossOrigin = "Anonymous" 属性；另一方面，图片加载是个异步过程，因此使用 Promise 进行异步处理。
接下来的流程与文字粒子相同: 提取像素，根据像素绘制粒子，设计粒子的运动函数，生成最后的动画即可。
// 初始化副画布，并绘制图片 function initCanvas(ctx, { width, height }) { var image = new Image(); image.src = "candy.jfif"; image.crossOrigin = "Anonymous"; return new Promise((res) => { image.onload = function () { ctx.drawImage(image, 0, 0, width, height); //将图片按像素写入画布 res(); }; }); } 复制代码
动图加载过程中，大家可以猜猜小包给大家准备了几块糖啊？
Gif 动态效果图
祝福语
接下来送上小包亲手写的祝福，虽说字写得一般啊，但情谊十足啊。
拉个票：明天就是年度优秀创作者的评选了，有喜欢小包的别忘了给小包投一票啊
源码仓库
源码地址: 圣诞周边
如果感觉有帮助的话，别忘了给小包点个 ⭐ 。
