1

当页面上使用多个画布时，是否有人遇到过 Google Chrome 无法呈现画布标签的问题？

我一直在发生这种情况。它出现在我的某些页面中，但没有出现在其他页面中；我很难隔离关键元素。当问题确实发生时，行为是一致的：一组特定的画布标签（有时是页面上的所有画布）不会呈现——它们显示为空白。它在 Chrome / Mac 中可靠地发生，但在 Firefox / Mac 中不会发生。有趣的是，如果我右键单击其中一个空白画布并选择“检查元素”，那么突然所有画布都出现了。所以它看起来真的像一个 Chrome 错误，而不是我的代码中的一些错误。

通过单击此 jsfiddle 文件中的“运行”可以观察到该问题：

http://jsfiddle.net/9HbWV/

此页面包含两个画布标签和一个在其中一个中绘制矩形的脚本块。在 Chrome 中，矩形不会出现。如果取消注释最后一行并重新运行，则会出现矩形。最后一行只是在另一个画布上调用 getContext()。

我还有其他更复杂的示例，即使为每个画布调用 getContext()，某些画布也不会呈现。所以问题并不像“每个画布必须至少调用一次getContext”那么简单。

4

1 回答 1

1

编辑：Chrome 错误报告的讨论（链接如下）揭示了一种解决方法：将一个唯一的 CSS 类附加到每个画布。IE

<canvas id="A" width=400 height=400 class=canvasA></canvas>
<canvas id='B' width=400 height=400 class=canvasB></canvas>​</p>

事实证明这实际上是 Chrome 中的一个错误：http ://code.google.com/p/chromium/issues/detail?id=144686 。错误评论中出现了一些细节：

  1. 您可以通过转到 about:flags 并激活“禁用加速 2D 画布”选项来解决该错误。

  2. 小画布（例如 200 x 200）似乎没有出现问题，因为该问题似乎与 GPU 相关，并且 Chrome 并未尝试将 GPU 用于小画布。

于 2012-09-15T19:17:14.197 回答