首页 > 代码库 > HTML5标签canvas制作动画
HTML5标签canvas制作动画
摘要：
canvas可以绘制图像，自然而然的就可以制作动画，因为动画的每一帧都是图像。我们可以利用javascript的setInterval函数来实现动画效果。
下面是一个例子，小圆绕着红点圆心不停的转圆圈。
代码：
1 <canvas id="myCanvas" width="300" height="300"> 2 您的浏览器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById(‘myCanvas‘); 6 if (canvas.getContext) { 7 var context = canvas.getContext(‘2d‘); 8 var posX = 100, 9 posY = 150,10 flag = true;11 12 setInterval(function() {13 14 context.fillStyle = "#ccc";15 context.fillRect(0,0,canvas.width, canvas.height);16 context.beginPath();17 context.fillStyle = "white";18 19 context.arc(posX, posY, 20, 0, Math.PI*2, true); 20 context.closePath();21 context.fill();22 23 console.log(posX + "," + posY);24 if(flag && posX < 201) {25 posX += 1;26 } else {27 posX -= 1;28 flag = false;29 if(posX < 100) {30 flag = true;31 }32 }33 if(flag) {34 posY = 150-Math.sqrt(2500-Math.pow(posX-150, 2));35 } else {36 posY = 150+Math.sqrt(2500-Math.pow(posX-150, 2));37 }38 39 context.beginPath();40 context.arc(150, 150, 2, 0, Math.PI*2, true)41 context.fillStyle = "red";42 context.fill();43 44 }, 50);45 }46 </script>
HTML5标签canvas制作动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。