我今天从 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();
最佳答案
你能发布比你提供的两行更多的代码吗?我相信这不仅仅是您设置宽度/高度的地方。
我有一个绘图应用程序,我已经断断续续地修改了一段时间,我在其中做了很多相同的事情。唯一的区别是我在设置宽度和高度之前调用了 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) 中找到了这个解决方案,但我不确定。
关于javascript - 谷歌浏览器 - context.canvas.width/context.canvas.width 导致 "Blue layer",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10000666/