在Chrome中画布上的哭脸

Question

当我在测试网站上窗口缩放和canvas元素的一个bug时，我注意到在几次重新调整大小后，canvas元素上有一个小的悲伤脸印记(而且这不是我创造的)。有人知道这是什么意思以及它可能为什么在那里吗?

截图:

虽然很有趣，但也非常令人困惑。

- GROVER.

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>

- luek baja

Answer 2

这可能是因为Google Chrome在那一点上无法渲染画布，问题也可能涉及您的硬件配置。

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

有一个讨论此问题的线程：Google支持主题。

- Towkir