博客设置中 html,html5 canvas中设置requestAnimationFrame帧速的方法

最新推荐文章于 2025-04-24 13:54:08 发布

weixin_39579468

最新推荐文章于 2025-04-24 13:54:08 发布

阅读量561

点赞数

文章标签：博客设置中 html

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;