javascript - 谷歌浏览器 - context.canvas.width/context.canvas.width 导致 "Blue layer"

Question

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

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

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

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

canWidth 和 canHeight 是动态生成的。

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

我还尝试将 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 浏览器版本中都没有问题。您是否可能在设置宽度和高度之前修改上下文的比例值？

例如这是我所拥有的，将 Canvas 设置为全文档绘图区域的文档宽度/高度:

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

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

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

我在网络上看到的教程建议清除 Canvas 的最佳方法是设置高度/宽度。这不完全正确。在文档加载时，这可能是最快/最简单的方法，但在鼠标移动时，您最好还是这样做:

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

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

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