IOS HTML5 Canvas 上的 draw / clearRect 问题

Question

我正在使用 iOS 9.3.2 并且遇到一个问题，如果我绘制具有给定尺寸集的图像，然后擦除具有相同尺寸的图像（使用 clearRect），图像会有剩余边缘。为了解决这个问题，我只是调整了我要清除的尺寸，直到我旋转手机（这并不总是会破坏它，但可能有 50% 的时间会破坏它）。然后边缘会回来。这在 chrome 浏览器上的 Android 中不是问题，但在 iOS 上的 safari 和 chrome 上都会发生。

有人有什么建议吗？我无法找到与此相关的任何现有问题，但如果您有任何帮助，我将不胜感激！谢谢！

Answer 1

这几乎可以肯定是由于绘制图像时的抗锯齿。

你可以做的一些事情：

• 始终在整个像素 x,y 坐标上绘制图像，可以使用：ctx.drawImage(img, x | 0, y | 0, w, h); 确保您在同一空间进行清理。如果您的 currentTransform 没有被整数偏移，这可能无法正常工作。
• 设置ctx.imageSmoothingEnabled = false;