HTML5 Canvas避免任何子像素渲染

Question

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

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

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

Answer 1

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

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

在这个堆栈溢出问题中,在某些情况下如何避免消除锯齿有一些技巧:我可以在HTML <canvas>元素上关闭抗锯齿吗？

但唯一适合我的是手动实现我自己的绘图功能来生成我想要的形状而不需要任何消除锯齿.这将与画布putImageData函数来完成,并有一个很好的教程在这里使用该方法.

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