画布像素出血/准确性问题

Question

在使用画布绘制切片数据时遇到看似舍入错误的内容，只是为了说明这一点，将其归结为最小可重现的示例。基本上，绘制调用使用（0,0,32,32）的源矩形，这是图中的网格。但Firefox更多地抓住了一些条子，通过源矩形进行采样。

顶部是Firefox，底部是Google Chrome

想法？

Answer 1

• 对于像素图形，您可能希望将smoothing设置为false
• 你应该确保你没有将非整数值传递给任何画布方法
• 如果您没有以原始大小显示canvas元素（即由于CSS调整大小），那么您还需要将CSS属性image-rendering设置为crisp-edges。