如何防止画布上的图像像素化？答案

【问题标题】：How do I prevent pixelization of images on canvas?如何防止画布上的图像像素化？
【发布时间】：2018-11-24 05:21:02
【问题描述】：

我有一个奇怪的案例，在清除画布并重绘图像几次（通常在 6-10 次清除/重绘之间）后，画布上的图像会像素化。

相关代码如下：

JS清除画布：

ctx.clearRect(0, 0, c.width, c.height);

JS 添加新图片：

var blobImage = new Image();
blobImage.src = 'blob.png';
blobImage.onload = function() {
    ctx.drawImage(blobImage, x, y);
}

HTML（为了完整性）：

<canvas id="myCanvas" width="600px" height="800px"></canvas>

因此，目前在任何时间点屏幕上最多有 8 个斑点。当这个数字改变时（向下到 1），在每次改变时，我都会用少一个 blob 重绘画布。

这是 blob 最初的样子：

然后，在所述（可变）数量的重绘之后，它们开始看起来像：

也会出现轻微的削波。

我没有使用任何外部库，只使用标准的html 和js。我什至不知道如何开始进行故障排除，因此不胜感激！

【问题讨论】：

可能对dzone.com/articles/how-you-clear-your-html5有帮助
请分享整个代码。清除和图像加载部分有什么关系？您显示的显然是抗锯齿伪影，但是如果您正确清除上下文，则不会发生这些情况，因此，如果您有它，则可能没有正确清除。
嗨@Kaiido，你有理由期望用户分享他们的整个代码库吗？
我们实际上要求他们共享minimal reproducible example。请注意，它必须是最小的，即只有重现问题所需的内容，但仍然足够完整，以便我们可以重现。你不会指望医生告诉你应该服用什么药，而他却没有检查你，也无法了解你的疾病是什么？这里也一样。
感谢@Kaiido，我也阅读了问题的要求；）我提供的只是重现问题所需的一切......我知道这很奇怪，这就是我在这里发布它的原因。现在，如果您想提供帮助并且无法使用我描述的方法重现问题，请务必告诉我，以便我们一起尝试找到答案！

【解决方案1】：

只需将宽度更改为 800px 即可：

<canvas id="myCanvas" width="800px" height="800px"></canvas>

或将高度更改为 600 像素

<canvas id="myCanvas" width="600px" height="600px"></canvas>

【讨论】：