## 雪花纷飞  这一节我们讲解使用HTML5 canvas制作的效果非常炫酷的3D雪花飘落特效。 **1、创建模板** 一个简单的div： ``` <div class="canvas"></div> ``` 当然，你也可以直接放置`canvas`，我这里是通过动态绘制的，背景图也是动态绘制的。 **2、JavaScript** 既然是雪花纷飞，当然先来定义雪花： ``` function Item(x, y, r) { this.x = x; this.y = y; this.r = r; this.vx = 0; this.vy = 5; this.deg = 0; } ``` 在上面的代码中，我们创建一个Item对象，用来保存每一片雪花的数据。 然后用一个数组来保存当前所有雪花： ``` var items = []; ``` 雪花纷飞的难点在于如何仿雪花，只需这样： ``` var rg = ctx.createRadialGradient(body.x, body.y, Math.floor(body.r / 4), body.x, body.y, body.r); rg.addColorStop(0, "rgba(255,255,255,1)"); rg.addColorStop(1, "rgba(255,255,255,0.1)"); ctx.fillStyle = rg; ctx.beginPath(); ctx.arc(body.x, body.y, body.r, 0, 2 * Math.PI, true); ctx.fill(); ``` 利用径向渐变功能来实现雪花。 让雪花动起来: ``` items[i].x += items[i].vx; items[i].y += items[i].vy; ``` 让其x和y与速度相加既可以。 最后，我们使用`requestAnimationFrame()`方法来实现循环动画（你也可以使用计时器）。 这里还需注意一点的是，为了提高效率，我们需要将每一次离开屏幕的雪花移除（也就是从items数组中移除）。 ``` var i = items.length; while (i--) { //判断是否离开画面 if (x1 > width || x1 < 0 || y1 > height) { items.splice(i, 1); } else { items[i].x += items[i].vx; items[i].y += items[i].vy; drawItem(items[i]); }; }; ``` 这样，我们就实现了雪花纷飞的效果。 源码路径：`WebDemo/Canvas/snow`