使用canvas實現簡單動畫
阿新 • • 發佈：2019-01-01
大多數 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>
