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

Posted

技术标签:

【中文标题】许多画布对象导致“InvalidStateError:尝试使用不可用或不再可用的对象”【英文标题】:many canvas objects result in "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" 【发布时间】:2013-09-24 17:44:57 【问题描述】:

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

使用ImageDatacanvas.get|putImage 似乎非常慢。 使用canvas.createPattern 缓存模式几乎与重绘一样快。 为每个形状缓存整个画布比重新绘制还要快。

但是,由于某些原因,一些画布在缓存期间会中断。在一些查找之后,以不规则的时间间隔(每 2-5 次缓存查找)检索一个画布,这会导致

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

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

也许有趣的是,我将形状设置为 (0,0),将它们的大小也减小到零。例如,即使矩形为 6x3px 大,也会发生错误,因此它不应该与大小有关。

有什么想法吗?如果没有立竿见影的想法,我将简化发布代码。谢谢,诺比

【问题讨论】:

这可能会给你一些输入:lists.w3.org/Archives/Public/public-whatwg-archive/2013Mar/… 为了让我们能够查明错误,你应该提供一个“工作”示例作为小提琴。 @Ken-AbdiasSoftware 感谢您提供链接!完美命中! 【参考方案1】:

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

【讨论】:

【参考方案2】:

在我的例子中,我看到了这个错误,因为画布区域为零:如果宽度*高度 = 0,那么这样的画布在 drawImage 期间会出现这个错误。

【讨论】:

正是我的问题 - 零高度。

以上是关于许多画布对象导致“InvalidStateError:尝试使用不可用或不再可用的对象”的主要内容,如果未能解决你的问题,请参考以下文章

Websocket - sockjs - InvalidStateError:连接尚未建立

将许多画布元素保存为图像

生成许多​​随机宽度和高度块,并使其适合 HTML5 画布的全宽 - EaselJS

Javascript - 旋转画布导致拉伸[重复]

python tkinter 无法在画布上实现提升方法

在 HTML5 画布模式下使用带有外部 JavaScript 文件的 Adob​​e Animate CC