Javascript 画布drawImage从多个画布到一个画布在chrome中运行缓慢

我想在画布上画一张带有+10k对象的大地图。这些对象基本上是许多圆（可能多达10种不同的颜色，大小相同）和一些单独形状的多边形。我还需要平移和缩放地图

我现在只专注于画圆圈，并根据提出的建议尝试了许多不同的实现

使用一块全分辨率的屏幕外画布作为缓冲区，并使用

drawImage

裁剪当前视口并在屏幕画布上绘制，效果很好，直到我达到iPhone 16M像素的大小限制。 我决定拆分缓冲区画布，并为每个与视口相交的缓冲区画布调用

drawImage

（参见图）

这在safari、firefox上运行得非常好，在iPhone safar上也非常快，但在Chrome上运行得非常慢

这是在动画帧中调用的代码（但仅当某些内容发生更改时），这会导致延迟

console.time("copy");
buffers = this.getBuffersInViewport(vp);
for(var i = 0; i < buffers.length; i++){
  var buffer = buffers[i];
  var sx = Math.round(Math.max(0,vp.minX - buffer.minX));
  var sy = Math.round(Math.max(0,vp.minY - buffer.minY));
  var sWidth = Math.round(buffer.width - sx);
  var sHeight = Math.round(buffer.height - sy);
  var dx = Math.round(Math.max(0,buffer.minX-vp.minX) * vp.scale);
  var dy = Math.round(Math.max(0,buffer.minY-vp.minY) * vp.scale);
  var dWidth = Math.round(sWidth * vp.scale);
  var dHeight = Math.round(sHeight * vp.scale);    
  this.context.drawImage(buffer,sx,sy,sWidth,sHeight,
    dx,dy,dWidth,dHeight);
}
console.timeEnd("copy");

console.time（“复制”）；
buffers=this.getBuffersInViewport（vp）；
对于（变量i=0；i

控制台的结果。时间： 铬：~200ms 狩猎：~0.5毫秒 Firefox:~10ms 勇敢者：~200米

看起来我在做一些chrome引擎不喜欢的事情。

---

我宁愿为chrome解决这个问题，而不是再次更改我的应用程序的lgoic。

这听起来确实像chrome中的一个bug，我们无法做太多来解决它。它似乎不是来自硬件加速，也不是来自源画布的大小。也许有人应该给他们写一份bug报告。iPhone和金丝雀上的Chrome可以工作。我猜他们已经修好了。我找到了一个解决办法。然后毫不犹豫地回答你自己这个问题。@kaido谢谢你的建议，但我会等一天，也许会有办法解决这个问题。