javaScript学习笔记——如何让<canvas>动起来

类似于动画，即一帧一帧的刷新场景

可以使用javaScript中的API

先介绍第一个：

function gameloop()
{
    window.requestAnimFrame(gameloop);

}

使用这个API还有一个好处：

可以利用两帧之间的时间间隔处理一些动画，使图像的运动过程变得平滑。

需要注意：

当切换到另一个网页时，画面是不进行刷新的，因此两帧之间的间隔会不停的增大，直到页面再切换回来才刷新下一帧

其他类似的API还有setInterval，setTimeout，但requestAnimFrame更加科学，其原理是：

当前绘制完成之后，根据机器的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的时间，

而setInterval，setTimeout会有一个定死的时间，比如我们指定给他每过60ms就绘制一帧，那么万一你绘制的内容非常大，以至于60ms之内不能完成这个任务怎么办，因此requestAnimFrame会是个更科学的方法，但它也会带来一个新问题，即每一秒多少帧，因为使用这个API导致帧与帧之间的时间间隔是不固定的，所以会有一个动态的时间间隔。

requestAnimFrame在不同的浏览器上需要进行配试，其代码如下：

window.requestAnimFrame=(function() {
        return window.requestAnimFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequest||
            function(/*function FrameRequestCallback*/callback,/*DOMElement Element*/element)
            {
                    return window.setTimeout(callback,1000/60);
            };//如果所有的都不适应则给一个固定帧间间隔
})();

return返回一个方式，如何返回方式需要根据浏览器的类型

下面介绍另一个API——setInterval()

如上所述，使用这个API需要给定一个刷新的毫秒数，除此之外还需要另一个称为匿名函数的参数：

setInterval(function(){},millisec)//每个millisec毫秒就执行一遍function(){}。

但是事实上这个计算并不准确，这是因为匿名函数里面执行的效率不同，不见得能够在millisec时间里面完成所有动画的绘制

还有一个很重要的问题：当我们在绘制下一帧时，上一帧的画面仍然会显示在屏幕上，此时我们需要另一个API来对上一帧的画面进行清除：

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//前两个参数是要清除的起始点的位置，后两个参数是画面对角线另一端的位置