var ca = document.getElementById("ca"); var ctx = ca.getContext('2d'); //生成n~m之間的隨機數的函數 function random(n,m){ return Math.floor(Math.random() * (m - n) + n); } //角度轉弧度的函數 function toRd(angle){ return angle * Math.PI / 180; } //設置變量存儲畫布的最大寬高度 var maxH = ca.height; var maxW = ca.width; //每一個雪花都具有的特性 //x,y坐標、雪花半徑、角度、 //先生成100個雪花 var snows = []; for(var i=0;i<200;i++){ snows.push({ "left": random(0, maxW), "top": random(0, maxH), "deg": random(-20, 20), //這個是起到更新數據的作用 "radius": random(2, 10) }); } //將這些屬性應用到每一雪花上// for(var i=0;i<snows.length;i++) {// var r = snows[i].radius;// var x = snows[i].left;// var y = snows[i].top;// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);// ra.addColorStop(0, "rgba(255,0,0,1)");// ra.addColorStop(1, "rgba(255,0,0,0.1)");// ctx.fillStyle = ra;// ctx.beginPath();// ctx.arc(x, y, r, 0, 2 * Math.PI);// ctx.fill();// } //如果向上面這樣寫的話不會有動畫效果 //要實現動畫效果就要讓每一個雪花的特性都變動起來 //設置定時器，定時改變特性 var timer = setInterval(function () { snow(); //要實現動畫效果首先要清除畫布內容 ctx.clearRect(0, 0, maxW, maxH); //每一個雪花每隔16ms需要變動的特性是 //x、y坐標，這是需要一個新的數值來做計算，改變它們的值 //為了避免重新定義這里直接利用snows.radius來計算 for (var i = 0; i < snows.length; i++) { //一開始每一個雪花的x,y坐標和半徑r //注意不能這樣寫，后面的雪花的數據會把前面的頂掉，這個bug找了好長時間// var r = snows[i].radius;// var x = snows[i].left;// var y = snows[i].top;// var d = snows[i].deg; //y變化量 var yChange = 0.5 * snows[i].radius; //x變化量 這里可以將x的變化量和y的變化量通過snows.deg關聯起來， //從而使每一個雪花都沿著自己的軌跡走，也可以單獨設定，所有的雪花軌跡一樣 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //這里的三角公式經過測試 tan 是最合適的 snows[i].top += yChange; snows[i].left += xChange; //經過上面這些步驟每一個雪花的x,y坐標都發生了改變，隨著時間的推移， //雪花都會飄出畫布，雪花最后就沒有了，這里需要作出判斷，把超出畫布的雪花從snows //里面刪掉，然后再添加新的雪花，這一步在最后進行，這里只做判斷 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) { //這里的x<0 是因為 xChange可能為負值 if(i>0){  snows.splice(i--, 1);  continue;//如果超出范圍了  // 那這個雪花就沒必要再進行后面的渲染了，所以這個判斷可以降低性能消耗 } } //開始渲染 var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius); ra.addColorStop(0, "rgba(255,255,255,1)"); ra.addColorStop(1, "rgba(255,255,255,0.1)"); ctx.fillStyle = ra; ctx.beginPath(); ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI); ctx.fill(); } }, 16); //增加雪花的數量 //就是往snows數組中添加成員 function snow(){ if(snows.length<220) { var l = 220 - snows.length; for(var i=0;i<l;i++){ snows.push({  "left": random(0, maxW),  "top": 0,  "deg": random(-20, 20), //這個是起到更新數據的作用  "radius": random(2, 10) }) } } }