Question

我在使用webkit（chrome / safari）和使用大图像的Canvas时遇到了一些问题。

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

有130帧，我们不得不将单个图像放入4个精灵中，以减少页面的单一请求负载。

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

不想用太多代码打扰你。但最后它只是：

this。$ context.drawImage（img，0，top，img.width-1，（img.height / sequenceCount）-1,0,0，this。$ canvas.width，this。$ canvas.height） ;

女巫在80ms超时内被召唤。

我们做到了，它适用于所有主流浏览器。但是对于webkit，对下一个sprite的每次更改都会导致大约400ms的硬延迟。

同样的问题是IE9，但可以通过在开头画一次精灵来修复它

   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

每次获得画布或图像宽度时，都要访问DOM，这通常比访问JS内存要慢。如果将这些值存储在resize上，则可能会看到改进，而是使用存储的值。

var canvasWidth, canvasHeight, imgWidth, imgHeight;

Webkit在画布中滞后于大图像

1 个答案: