HTML5 Canvas 避免任何亚像素渲染答案

【问题标题】：HTML5 Canvas avoid any subpixel renderingHTML5 Canvas 避免任何亚像素渲染
【发布时间】：2011-10-25 01:37:32
【问题描述】：

正如here. 所见，我在画布中遇到了一些亚像素精度问题。现在我有更多。我正在尝试渲染硬边等距正方形，如我提供的链接中的图像所示。试图稍后处理渲染图像中的像素数据并提取当前颜色。

但是由于亚像素问题，我收到了原始图像中实际不存在的颜色！而且无论我似乎从哪里开始画你在图像中看到的线（无论是从 [1,1] 到 [10,10] 还是从 [1.5, 1.5] 到 [10.5, 10.5]，这只是一个例如）我总是得到这些破坏我结果的亚像素颜色！

有谁知道我该如何避免这种情况或建议我应该绘制伪等距线的正确方法（在像素艺术等距角度中伪）所以我的形状上有很好的硬边，我不会破坏渲染带有任何亚像素垃圾的图像。

【问题讨论】：

【解决方案1】：

好吧，经过一些详尽的研究，似乎没有标准化的方法来阻止我正在经历的事情。

这是一种抗锯齿，取决于浏览器，只能对某些绘图操作启用或禁用。

在这个堆栈溢出问题中，有一些关于如何在某些情况下避免抗锯齿的技巧：Can I turn off antialiasing on an HTML <canvas> element?

但唯一对我有用的是手动实现我自己的绘图功能以生成我想要的形状而无需任何抗锯齿。这将通过 canvas putImageData 函数来完成，并且有一个很好的教程 right here 关于使用它的方法。

暂时没有api支持的解决方案

【讨论】：