安卓能对浏览器刷新率锁帧吗 h5 requestAnimationFrame 动画会随着刷新率改变速度

根据时间在 requestAnimationFrame 计算下一帧的位置大小等参数，而不是根据调用次数每次 currentpos.x+2px 这样根据当前帧修改

requestAnimationFrame 本来就是那样用的，你应该在回调函数里取那个时间参数，然后根据时间差来计算绘图速度。

固定的 fps 是不存在的.... requestAnimationFrame 只是让你一帧改一次, 你可以使用 requestIdleCallback 来控制你每一次渲染和时间之间的关系，就算是高刷，那么无非每一帧变化的值小了，但是离你真正预设的动画时间和距离，不会发生改变，就比如你本来 60fps 的时候一次走 10px，高刷在 120fps 的时候一次只走 5px，

按帧率计算逻辑 ×
按时间计算逻辑 √

帧率无关动画

@1OF7G 现在的动画就是这样的 每回调一次 x + speed 来渲染动画 导致高刷新率的时候速度快 性能差的手机 fps 低的时候一卡一卡的

@muzuiget 具体可以讲一下吗 时间差是指的什么时间差

@soulmt 是要先算出 fps 然后 再根据 fps 来算每帧需要走的距离是吗

@wdspro 你要忘记有 FPS 这个东西，当他不存在。

也尝试了在所有素材开始游戏前的 部分预渲染

@wdspro

canvas 性能在几种技术中是最差的。
替代选择
1. css 动画
2. webgl

@fengjianxinghun 这样的吗 选型技术的时候 最开始就是舍弃了 css3 webgl 适合做小游戏吗 有合适案例吗

@wdspro fps 不用管， 每一帧渲染浏览器会通过 requestIdleCallback 告诉你这一帧还有多少时间是空闲的，比如浏览器处理 5ms 那么在 60 帧的时候，你能拿到的时间分片就是 11.7ms ， 如果是 120 帧的话，你拿到的时间可能是 3.3ms ，那么，假设你的动画是走 100px 需要 100ms，那么速度就是 1px/ms， 那么在上述条件下，如果给你 11.7ms 那么你就走 11.7px ，在 120 帧的时候给你 3.3ms 你就走 3.3px ， 这个时间是浏览器给你的时间，可以不用管具体帧数是多少。

@wdspro 5 年前做 h5 手游的时候，当时 webgl 普及率不高，引擎是纯 canvas 写的慢的要死，部分内容就用 html/css3 动画代替优化。webgl 做 3d 游戏都够了何况小游戏。

@fengjianxinghun 但是 webgl 也是绘制在 canvas 上的.....你指的是默认的那种 canvas context 2d 的吗?

@wszgrcy 对

@wdspro 找个成熟 h5 游戏引擎吧，比如 cocos 之类的。

@wszgrcy 是的 context 2d 的

@soulmt 是的 现在是按照这样的思路达到了 所有刷新率一个速度值了 但是现在就是性能有问题 会爆掉的样子 两个帧之间 有时候会达到几秒钟 在等下一次渲染的时候我的页面状态是直接卡住的 现在其实就只用到了 ctx.drawImage 同屏一个背景图 几个道具 加人物动态图在渲染 我想不出是需要优化什么地方 图已经压缩到极限了

@fengjianxinghun 有考虑 但是现在已经到了快验收阶段了 一时间想着先优化过去 暂时没时间折腾了 只能后面有时间研究研究了

@wdspro 背景图之类的静态部分能用 html 的就用 html，不要用 ctx.drawimage 每帧 draw

webgl 可以 batch draw 节约 drawcall count，context 2d 不行。