javascript - Canvas 像素出血/准确性问题

Question

在使用 Canvas 绘制图 block 数据时遇到似乎是舍入的错误，只是为了说明这一点，将其归结为最小的可重现示例。基本上，绘制调用使用 (0, 0, 32, 32) 的源矩形，即图中的网格。但 Firefox 捕获了更多的一小部分，采样了源矩形。

顶部部分是 Firefox，底部部分是 Google Chrome

想法？

Answer 1

• 对于像素图形，您可能想要设置 smoothing为假
• 您应该确保没有将非整数值传递给任何 Canvas 方法
• 如果您没有以其原始大小显示 Canvas 元素(即由于 CSS 调整大小)，那么您还需要设置 CSS 属性 image-rendering到清晰的边缘。