Google Chrome - context.canvas.width/context.canvas.width 导致“蓝色层”

Question

我今天从 Chrome 版本 17 升级到 Chrome：18.0.1025.142。

我注意到我正在开发的一个网络应用程序有一个奇怪的蓝色层，它在加载时出现，然后在您开始滚动时消失。

我已经在我的 JS 中追踪到以下几行：

                context.canvas.width = canWidth;
                context.canvas.height = canHeight;

canWidth 和 canHeight 是动态生成的。

注释掉这些行会停止渲染蓝色图层，但这不是解决方法，因为我需要使用动态生成的值来控制画布宽度/高度。

我还尝试将 context.canvas.width 和 context.canvas.height 硬编码为 600，这也产生了蓝层问题。

这在以前版本的 Chrome 上不是问题，我在 FireFox 中也没有任何问题。

对可能出现的问题有什么建议吗？

编辑：

这是上面的代码块（nodeLeft和nodeTop在其他地方生成）：

                context.clearRect ( 0 , 0 ,canWidth, canHeight );
                context.canvas.width = canWidth;
                context.canvas.height = canHeight;                                 
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(nodeLeft, nodeTop);
                context.strokeStyle = "#000000";
                context.lineCap = "round";
                context.stroke();

Answer 1

您能否发布比您提供的两行更多的代码？我相信这不仅仅是您设置宽度/高度的地方。

我有一个绘图应用程序，我已经打开和关闭了一段时间，我在其中做的事情非常相似。唯一的区别是我在设置宽度和高度之前调用了context.scale(0,0);。我在任何带有蓝色覆盖层的 Google Chrome 版本中都没有问题。您是否可能在设置宽度和高度之前修改上下文的比例值？

例如这就是我所拥有的，将画布设置为完整文档绘图区域的文档宽度/高度：

context.scale(0,0);
context.canvas.width = $(document).width();
context.canvas.height = $(document).height();

编辑：如果您想测试蓝色叠加层以查看它是您的浏览器还是您的代码，我提到的修补站点位于 http://drawcomix.com。

编辑：根据您的附加评论...

我在网络上看到了一些教程，建议清除画布的最佳方法是设置高度/宽度。这并不完全正确。在文档加载时，这可能是最快/最简单的方法，但在鼠标移动时，您最好执行以下操作：

context.save();
context.setTransform(1,0,0,1,0,0);
context.clearRect(0,0,width,height); // width/height of canvas
context.restore();

如果您不在画布上执行任何转换，您可能不需要setTransform。

我相信我在 Pro HTML5 Programming (Apress) 中找到了这个解决方案，但我不确定。

Answer 2

编辑：

好的，我得到了它。似乎是某些 AMD 显卡的问题。我可以在催化剂控制中心关闭铬的高性能模式。这为我解决了大部分烦人的问题……希望它会在下一个版本中得到修复。

更多信息请见：http://code.google.com/p/chromium/issues/detail?id=121658

---

这不是解决方案，但我面临同样的问题，这让我发疯。我正在努力确定它。我在不同的机器上测试过不同的浏览器：

问题：

• 蓝色层（我只在 Chrome 未最大化时才看到它们）
• 错位的 y 滚动条（有时仅在我切换选项卡时才会显示）
• 扭曲的形状。画布的大小和绘制的图像/形状因 chrome 和其他浏览器而异。这意味着，Chrome 上的画布/形状更小，主要是缩小了宽度。

结论一： 似乎并非在每台装有 Chrome 18.x.x 的机器上都会发生这种情况。似乎是硬件问题，但实际上无法进一步限制它。

结论二： 如果我将画布的大小设置为 200 高度/宽度，则不会出现问题。如果我将它设置为高于 200，它会使画布/矩形变形并出现其他问题。

结论三： 只有在画布上绘制了某些内容或设置了某些内容（即填充样式）时，才会出现问题。

这里是我使用的测试sn-ps：

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);