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

标签 javascript google-chrome canvas html5-canvas

我今天从 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/

相关文章:

javascript - Extjs 3.4 Tree Grid 默认按指定列排序

javascript - Tinymce pragraph 标签 P 在保存数据时添加到文本区域

javascript - 原生 javascript 中的 jQuery index()

javascript - 通过控制台获取TD元素中的所有名字

javascript - Firefox 正在尝试与 Chrome 进行私密浏览通信

javascript - Canvas 图像旋转、动态 Canvas 调整大小 - 图像被裁剪

javascript - 在矩形中旋转点

javascript - 谷歌浏览器不提交表单(js 错误?)

html - 如何在 Canvas 上渲染 d3.js map ,使其不模糊

c# - 如何在 Silverlight 中拉伸(stretch)控件以填充 Canvas?