如何获得多个画布标记在Chrome可靠呈现?(How to get multiple canvas

2019-10-17 03:57发布

有没有人曾与谷歌浏览器的问题没有呈现的画布标记时超过一个画布页面上使用?

我一直有这种情况发生。 它发生在我的一些网页,有的没有; 我有一个很难隔离关键因素。 当问题确实发生,则该行为是一致的:画布标记(有时页面上的所有画布)的一组特定的不渲染 - 它们显示为空白。 它可靠地出现在Chrome / Mac上,但在Firefox / Mac上不会发生。 有趣的是,如果我在空白画布的一个右键单击并选择检查元素,然后将画布的突然全都出现。 所以才像Chrome错误,而不是在我的代码中的一些错误。

这个问题可以通过单击“运行”,在此的jsfiddle文件中指出:

http://jsfiddle.net/9HbWV/

此页面包含两个画布标记,并在其中一人绘制一个矩形的脚本块。 在Chrome中,矩形不会出现。 如果您未注释掉最后一行,并重新运行,矩形确实出现。 最后一行只是另一个画布上调用的getContext()。

我有其他更复杂的例子,其中有些画布不呈现即使的getContext()被调用每个画布。 所以,问题并不这么简单“的getContext必须至少一次呼吁每个画布”。

Answer 1:

编辑:Chrome有错误报告(下面的链接)的讨论,揭示了一个解决办法:附加一个独特的CSS类每个画布。 即

<画布ID = “A” 宽度= 400 HEIGHT = 400类= canvasA> </画布>
<画布ID = 'B' 的宽度= 400 HEIGHT = 400类= canvasB> </画布>


原来,这其实是在浏览器的错误: http://code.google.com/p/chromium/issues/detail?id=144686 。 一对夫妇的细节从错误的意见出现:

  1. 标志并激活“禁用加速2D画布”选项:您可以将有关解决的bug。

  2. 小画布(如200×200),似乎并没有表现出这个问题,因为这个问题似乎是GPU相关的和Chrome不会尝试使用GPU进行小画布。



文章来源: How to get multiple canvas tags to render reliably in Chrome?