## 雪花紛飛  這一節我們講解使用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`