HTML5标签canvas制作动画

摘要：

　　canvas可以绘制图像，自然而然的就可以制作动画，因为动画的每一帧都是图像。我们可以利用javascript的setInterval函数来实现动画效果。

下面是一个例子，小圆绕着红点圆心不停的转圆圈。

代码：

 <canvas id="myCanvas" width="300" height="300">
         您的浏览器不支持canvas！
     </canvas>
     <script>
         var canvas = document.getElementById('myCanvas');
             if (canvas.getContext) {
                  var context = canvas.getContext('2d');
                 var posX = 100,
                     posY = 150,
                     flag = true;

                 setInterval(function() {

                     context.fillStyle = "#ccc";
                     context.fillRect(0,0,canvas.width, canvas.height);
                     context.beginPath();
                     context.fillStyle = "white";

                     context.arc(posX, posY, 20, 0, Math.PI*2, true);
                     context.closePath();
                     context.fill();

                     console.log(posX + "," + posY);
                     if(flag && posX < 201) {
                         posX += 1;
                     } else {
                         posX -= 1;
                         flag = false;
                         if(posX < 100) {
                             flag = true;
                         }
                     }
                     if(flag) {
                         posY = 150-Math.sqrt(2500-Math.pow(posX-150, 2));
                     } else {
                         posY = 150+Math.sqrt(2500-Math.pow(posX-150, 2));
                     }

                     context.beginPath();
                     context.arc(150, 150, 2, 0, Math.PI*2, true)
                     context.fillStyle = "red";
                     context.fill();

                 }, 50);
             }
     </script>