5

我今天从 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();
4

2 回答 2

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) 中找到了这个解决方案，但我不确定。

于 2012-04-03T20:23:31.267 回答
0

编辑：

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

有关更多信息，请参阅：http ://code.google.com/p/chromium/issues/detail?id=121658

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

问题：

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

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

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

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

这是我使用的测试片段：

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas>
...
ctx.fillRect (10, 10, 55, 50);
于 2012-04-17T22:45:58.430 回答