类似于动画,即一帧一帧的刷新场景
可以使用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);//前两个参数是要清除的起始点的位置,后两个参数是画面对角线另一端的位置