javascript - Webkit 滞后于 Canvas 中的大图像

Question

我在使用 webkit (chrome/safari) 和带有大图像的 Canvas 时遇到了一些问题。

对于我的客户，我们必须在 Canvas 上以每帧 80 毫秒的速度编写动画介绍影片。

有 130 帧，我们不得不将单张图片放入 4 个 Sprite 中，以减少页面的单次请求负载。

每个 Sprite 大小约为 2.5MB，我们只切分所需帧的部分。到目前为止可能。

不想用太多代码来打扰您。但最终它只是关于:

this.$context.drawImage(img, 0, top, img.width-1 ,(img.height / sequenceCount)-1, 0, 0, this.$canvas.width, this.$canvas.height);

女巫在 80 毫秒超时内被调用。

我们做到了，它适用于所有主流浏览器。但是对于 webkit，对下一个 Sprite 的每次更改都会导致大约 400 毫秒的严重滞后。

IE9 也有同样的问题，但可以通过在开始时绘制每个 Sprite 一次来解决

   if (Browser.ie9) {
       for(var x = 0; x < this.sequence[0].sprites.length; x++){                
           this.draw(this.sequence[0].sprites[x].obj, 0, 1); 
       }                   
       this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
   }

(绘图函数只包括前面示例中的 drawImage 函数。)

但是对于 webkit 浏览器，我仍然有大约 400 毫秒的滞后时间。

是的，图像是预加载的。所以这不是问题。

知道这可能是什么吗？

感谢您的帮助!

Answer 1

每次获取 Canvas 或图像宽度时，都是在访问 DOM，这通常比访问 JS 内存要慢。如果您在调整大小时存储这些值并改用存储的值，您可能会看到改进。

var canvasWidth, canvasHeight, imgWidth, imgHeight;