canvas雪花效果核心代碼

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)
				})
			}
		}
	}