HTML5 canvas中用于实现动画效果，往往需要用到js中SetInterval与setTimeout，这种定时脚本往往会占用额外的CPU资源。HTML5给我们提供了requestAnimationFrame的方法用于代替它们，但这个requestAnimationFrame却没有提供控制帧速的方法，它的速度可以超过60FPS，但也可能会因为电脑配置或浏览器不同的原因而不同。对于网络游戏这种对画面同步要求比较高的时候，可能是往往不够理想的。而我们的设计HTML5游戏时也可能不需要60FPS处理速度，下面的脚本使帧速基本控制在30FPS左右，经测试可以基本实现控制帧速，各浏览器的帧速基本相同。

var drawcount={time:0,fps:31,nums:1}; function startDraw(){ var t=new Date(); if(drawcount.time!=0){ var fps=Math.floor(1000/(new Date().getTime()-drawcount.time.getTime())); var fps2=drawcount.fps+fps; var fps3=fps2/drawcount.nums; if(fps3>31){ window.requestNextAnimationFrame(startDraw); return; }; //输出fps3可以查看当前帧速 drawcount.fps=fps2; drawcount.nums++; if(drawcount.nums>5000){ drawcount.nums=0; drawcount.fps=0; }; }; drawcount.time=t; /********************/ /*这里添加处理画布的事件*/ /********************/ window.requestNextAnimationFrame(startDraw); }

注：上面用到的 window.requestNextAnimationFrame，相当于window.setTimeout，详见附件。

requestnextanimationframe.zip