HTML5 Cavans(11) 简单动画：圆周运动

xiaoxiao2021-03-25 48

<!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, radius, angle) { this.x = x; this.y = y; this.radius = radius; if (angle == undefined) { this.angle = 0; } else { this.angle = angle; } } var shapes = []; //随即产生形状 for (var i = 0; i < 10; i++) { var x = Math.random() * 250; var y = Math.random() * 250; var radius = Math.random() * 50; shapes.push(new Shape(x, y, 30)); } 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]; var angle = tmpShape.angle + Math.PI / 100; if (angle > Math.PI * 2) angle = 0; tmpShape.angle = angle; //半径是直角三角形斜边，根据角度计算x和y的偏移 var x = tmpShape.radius * Math.cos(angle); var y = tmpShape.radius * Math.sin(angle); //画出半径轨迹 context.beginPath(); context.moveTo(tmpShape.x, tmpShape.y); context.lineTo(tmpShape.x + x, tmpShape.y + y); context.stroke(); context.fillRect(tmpShape.x + x-5, tmpShape.y + y-5, 10, 10); } 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>

转载请注明原文地址: https://ju.6miu.com/read-39290.html

技术

最新回复(0)