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