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>