HTML5 Cavans(10) 簡單動畫:擺動
阿新 • • 發佈：2019-01-29
<!DOCTYPE html > <html> <head> <title></title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var btnStart = document.getElementById("btnStart"); var btnStop = document.getElementById("btnStop"); var isPlay = true; btnStart.style.display = "none"; btnStart.onclick = function () { isPlay = true; this.style.display = "none"; btnStop.style.display= ""; animate(); } btnStop.onclick = function () { isPlay = false; this.style.display = "none"; btnStart.style.display = ""; } //形狀類，建構函式傳入起始座標，寬度，長度 function Shape(x, y, width, height) {this.x = x; this.y = y; this.width = width; this.height = height; } var shapes = []; //隨即產生形狀 for (var i = 0; i < 10; i++) { var x = Math.random() * 250; var y = Math.random() * 250; var width = Math.random() * 50; shapes.push(new Shape(x, y, width, width)); } function animate() { context.clearRect(0, 0, canvas.width, canvas.height); var len = shapes.length; for (var i = 0; i < len; i++) { var tmpShape = shapes[i]; //產生擺動效果 tmpShape.x += Math.random() * 4 - 2; tmpShape.y += Math.random() * 4 - 2; context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width,tmpShape.height); } if (isPlay) setTimeout(animate, 33); } animate(); } </script> </head> <body> <canvas id="myCanvas" height="500px" width="500px" style="border:1px black solid"> </canvas> <input id="btnStart" type="button" value="start" > <input id="btnStop" type="button" value="stop" > </body> </html>