我可以关闭 HTML <canvas> 元素上的抗锯齿功能吗？

Question

我正在玩弄 <canvas> 元素、画线等。

我注意到我的对角线是抗锯齿的。我更喜欢我正在做的锯齿状外观 - 有什么办法可以关闭此功能吗？

原文由 Blorgbeard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于图像，现在有 context.imageSmoothingEnabled = false 。

但是，没有任何东西可以明确控制线条绘制。您可能需要使用 getImageData 和 putImageData 绘制自己的线条（ 困难的方式）。

原文由 Kornel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 --- 等坐标上绘制 --- ctx.lineTo(10.5, 10.5) 1-pixel 线。 Drawing a one-pixel line over the point (10, 10) means, that this 1 pixel at that position reaches from 9.5 to 10.5 which results在画布上绘制的两条线中。

如果你有很多单像素线，一个不需要总是将 0.5 添加到你想要绘制的实际坐标的好技巧是 ctx.translate(0.5, 0.5) 你的整个帆布在开始。

原文由 allan 发布，翻译遵循 CC BY-SA 2.5 许可协议