许多画布对象导致"InvalidStateError:尝试使用不可用或不再可用的对象"

vir*_*obi 12 javascript performance html5 caching canvas

试图在a上管理10.000个简单形状<canvas>,我尝试使用缓存作为重绘的替代品.令我惊讶的是:

  • 使用ImageData并且canvas.{get|put}Image看起来非常慢.
  • 缓存模式canvas.createPattern几乎与重绘一样快.
  • 为每个形状缓存整个画布甚至比重绘更快.

然而,出于某种原因,一些画布在缓存期间会中断.在一些查找之后,以不规则的间隔(每2-5次高速缓存查找),检索一个导致一个画布的画布

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
Run Code Online (Sandbox Code Playgroud)

被抛出 我使用相同的代码来缓存不同的对象,所以我认为问题不是缓存,而是canvas对象的数量.

也许我感兴趣的是我将形状设置为(0,0),将它们的大小减小到零.例如,即使矩形是6x3px大,也会发生错误,所以它不应该是关于大小调整的.

任何的想法?如果没有立竿见影的想法,我会简化发布的代码.谢谢,nobi

Ste*_*nko 10

在我的情况下,我看到这个错误因为零画布区域:如果width*height = 0,那么这样的画布在drawImage期间会出现此错误.


vir*_*obi 4

Ken 是完全正确的 - 尽管我在矩形应该仍为 6x3 时看到了错误,但当我将矩形动画设置为 (1,1) 而不是 (0,0) 时,错误不再出现。