1.氣泡事件-隨機位置/顏色夢幻全屏

canvas

canvas

![canvas

canvas

$(function() {	var canvasNode = document.querySelector("#wrap-canvas");	canvasNode.width = 550;	canvasNode.height = 450;	if(canvasNode.getContext) {		var canvasPen = canvasNode.getContext("2d");		/***簡易canvas動畫position***/		/*var flag=0;		  setInterval(function(){			//每次進入清理畫布			canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);			flag++;			canvasPen.save();			canvasPen.strokeStyle="white";			canvasPen.beginPath();			//位置變動			canvasPen.strokeRect(flag,flag,100,100);			canvasPen.restore();			//1s/60次		},1000/60);*/		/*arc(x,y（圓形位置）,radius半徑,startAngle開始角度,endAngle結束角度,anticlockwise時間方向-true逆時針|false順時針)			|- arc(x,y,radius,startAngle,endAngle,anticlockwise)			|- canvasPen.arc(150,150,10,0,360*Math.PI/180);		  Math.random -->返回[0-1)：包括0，但不包括1			* 開區間(a,b) : a和b之間，不包括a、b			* 閉區間[a,b] : a和b之間，包括a、b			* Math.random()*mosaicSize=[0,5]			* 1個畫素的mosaic：並且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]		 */		//隨機圓位置		var positionArr = [];		//1.繪製圓		setInterval(function() {			//radius最小值=5			var radius = Math.random() * 6 + 2;			var x = Math.random() * canvasNode.width;			//var y = Math.random() * canvasNode.height;			//取消隨機y軸，			var y = canvasNode.height - radius;			//顏色隨機，取整			var r = Math.round(Math.random() * 255);			var g = Math.round(Math.random() * 255);			var b = Math.round(Math.random() * 255);			var a = 1;			//運動曲線，旋轉deg，起始點，影響因子,因子越大，旋轉deg幅度越大			var deg = 0;			var initialX = x;			var initialY = y;			//var effect = 20;			//隨機因子			var effect=Math.random()*20+10;			positionArr.push({				x: x,				y: y,				radius: radius,				r: r,				g: g,				b: b,				a: a,				deg: deg,				initialX: initialX,				initialY: initialY,				effect: effect			});		}, 50);		//2.將陣列中的圓繪製到畫布		setInterval(function() {			canvasPen.clearRect(0, 0, canvasNode.width, canvasNode.height);			//每次進入迴圈，半徑變化			console.log(positionArr);			//1.生成動畫			for(var j = 0; j < positionArr.length; j++) {				//限制max最大值,不限制則成為無限放大迴圈夢幻斑點，可取消判斷				/*if(positionArr[j].radius<=80){					positionArr[j].radius++;				}*/				//透明度<0，不需要繪製畫布,Radius隨機，不需要指定半徑和透明度				/*if(positionArr[j].a<=0){					//去掉第j個元素，去掉1個					positionArr.splice(j,1);				}				positionArr[j].radius++;				positionArr[j].a-=0.01;*/				/*曲線運動,係數增加運動速度*/				positionArr[j].deg+=7;				//更改圓心				/*canvasNode.style.left=initialX+(deg*Math.PI/180)*effect/2+"px";				canvasNode.style.top=initialY+Math.sin(deg*Math.PI/180)*effect*2+"px";*/				//canvas不加ps，順時針自左向右旋轉				/*positionArr[j].x = positionArr[j].initialX + (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect / 2 ;				positionArr[j].y = positionArr[j].initialY + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;*/				//自下而上旋轉				positionArr[j].x = positionArr[j].initialX + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;				//曲線運動波長配置：positionArr[j].effect * 2				positionArr[j].y = positionArr[j].initialY - (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect ;				//判斷位置大於畫布則刪除,最高top=y				if(positionArr[j].y<=50){					positionArr.splice(j,1);				}							}			//2.生成動畫元資料：繪製隨機陣列的圓			for(var i = 0; i < positionArr.length; i++) {				canvasPen.save();				//隨機色				canvasPen.fillStyle = "rgba(" + positionArr[i].r + "," + positionArr[i].g + "," + positionArr[i].b + "," + positionArr[i].a + ")";				canvasPen.beginPath();				canvasPen.arc(positionArr[i].x, positionArr[i].y, positionArr[i].radius, 0, 2 * Math.PI);				canvasPen.fill();				canvasPen.restore();			}			//每秒60次		}, 1000 / 60);	}})

canvas

canvas