镀铬帆布上悲伤的脸

Question

当我在我的网站上测试一个与窗口缩放和canvas元素有关的bug时，我注意到在调整了几次大小之后，canvas元素有一个小的悲伤的面孔(而且我没有创建)。有人知道这意味着什么吗?为什么会在那里？

截图：

​

虽然很有趣，但很让人困惑。

Answer 1

当将canvas.width和canvas.height设置为非常高的值时，似乎会出现问题。下面的代码片段复制了这个问题(如果您使用的是chrome)。

​

const canvases = document.getElementsByTagName("canvas");

canvases[0].getContext("2d").fillRect(
  0,
  0,
  canvases[0].width,
  canvases[0].height,
);

canvases[1].getContext("2d").fillRect(
  0,
  0,
  canvases[1].width,
  canvases[1].height,
);

canvas {
  width: 100px;
  height: 100px;
  outline: 1px solid #000000;
}

<p>canvas 1: regular<p>

<!--normal values-->
<canvas width="1000" height="1000"></canvas>

<p>canvas 2: very high width and height<p>

<!--very high values-->
<canvas width="100000" height="100000"></canvas>

​

Answer 2

这可能会发生，因为谷歌Chrome未能呈现画布在这一点上，问题还可能包括您的硬件配置。

尝试重新安装Google或关闭任务管理器中的所有google进程，然后重新启动。

有一条关于这一点的讨论：Google支持线程