随笔- 171 文章- 2 评论- 105 阅读- 66万

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>