HTML5 Canvas避免任何子像素渲染

Question

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

但由于子像素问题我​​正在接收原始图像中实际不存在的颜色！无论我在哪里开始绘制您在图像中看到的线条（无论是从[1,1]到[10,10]还是[1.5,1.5]到[10.5,10.5]，这只是一个例子）我总是得到这些破坏我的结果的子像素颜色！

有谁知道我怎么能避免这个或建议我应该绘制伪等距线的正确方法（伪像在像素艺术等距角度）所以我的形状上有很好的硬边缘而且我不会破坏渲染任何类型的子像素垃圾图像。

Answer 1

经过一些详尽的研究后，似乎没有标准化的方法可以阻止我所经历的事情。

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

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

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

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