使用canvas實現簡單動畫

chjunjun發表於2018-04-16
Canvas動畫

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext()獲得的一個“繪圖環境”物件上。


實現如下星星的運動

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id='canvas' width="800px" height="500px"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		var c = canvas.getContext('2d');
		c.fillStyle = 'gray';
		c.fillRect(0,0,800,500)
		var target=[{}];
		for (var i = 0; i <= 60; i++) {
			var obj = {}
			obj.x = randomNum(30,770);
			obj.y= randomNum(30,470);
			obj.speedX = randomNum(-2,2);
			obj.speedY=randomNum(-2,2);
			obj.deg = randomNum(0,180)
			target[i]=obj;
			drawStar(c,target[i].x,target[i].y,10,5,target[i].deg);
		};

		setInterval(function() {
			//更新畫布
			c.clearRect(0,0,800,500);
			c.fillStyle = 'gray';
			c.fillRect(0,0,800,500)
			//繪製星星
			for (var i = 0; i <= 60; i++) {
				
				target[i].x = target[i].x+target[i].speedX;
				target[i].y = target[i].y+target[i].speedY;

				//保證星星速度不為零
				if(target[i].speedX==0){
					target[i].speedX=1
				}
				if(target[i].speedY==0){
					target[i].speedY=1
				}
				//星星運動到邊界後往回運動
				if(target[i].x>=770){
					target[i].speedX = -randomNum(1,2);
				}
				if(target[i].x<=30){
					target[i].speedX = randomNum(1,2);
				}
				if(target[i].y>=470){
					target[i].speedY = -randomNum(1,2);
				}
				if(target[i].y<=30){
					target[i].speedY = randomNum(1,2);
				}
				drawStar(c,target[i].x,target[i].y,20,10,target[i].deg);
			}

		},1.7);
		//取隨機數
		function randomNum(min,max){
			return Math.floor(Math.random()*(max-min+1)+min);
		}
		//畫星星
		//x, y為圓心座標，R、r分別為大圓、小圓半徑,rot旋轉角度 
		function drawStar(cxt, x, y, r, R, rot){
                cxt.beginPath();
                for(var i = 0; i < 5; i ++){
                    cxt.lineTo( Math.cos( (18 + i*72 - rot)/180 * Math.PI) * R + x,
                                -Math.sin( (18 + i*72 - rot)/180 * Math.PI) * R + y)
                    cxt.lineTo( Math.cos( (54 + i*72 - rot)/180 * Math.PI) * r + x,
                                -Math.sin( (54 + i*72 - rot)/180 * Math.PI) * r + y)
                }
                cxt.closePath();
                cxt.lineWidth = 3;
                cxt.fillStyle = "#fb3";
                cxt.strokeStyle = "#fb5";
                cxt.lineJoin = "round";
                cxt.fill();
                cxt.stroke();
        }

	</script>
</body>	
</html>

相關文章