canvas 动画在真机上比较卡
发布于 5 年前 作者 xiulan33 16109 次浏览 来自 问答
setTimeout(function _rotate() {
      ctx.restore()
      ctx.translate(canvasInfo.width / 2, canvasInfo.height / 2)
      currentDeg += distance
      ctx.rotate(currentDeg  * Math.PI / 180)
      ctx.drawImage(path, -width / 2, -height / 2, width, height)
      ctx.draw()
      setTimeout(_rotate, 16.7)
    }, 16.7)

为了实现图片旋转，代码如上，参考了官方小程序示例，没有重复调用clearRect，大概就是隔16.7ms （为了达到60帧）调整一下角度绘制一次图片，模拟器上非常流畅，但真机上明显卡顿、帧数不够；Android 比iPhone 好一点，但最奇怪的是一部iPhone 5居然完全正常。目前的动画流畅性依次是：开发者工具 > iPhone 5（iOS 9）> Android > iPhone 6（iOS 10）。

PS：即使是官方小程序示例的canvas 动画，也有点卡顿的感觉。

2 回复

卡得一比

真的很卡

回到顶部