HTML5画布避免任何亚像素渲染。

Question

14

如此处所示，我在画布中遇到了一些子像素精度问题。现在我的问题更多了。我试图渲染如链接中图片所示的硬棱角等距正方形。为了以后从渲染图像的像素数据中提取当前颜色。

Sub Pixel

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

有人知道我应该如何避免这种情况或建议我应该正确地绘制伪等距线条(伪像素艺术等距角)，使我的形状具有漂亮的硬边缘，并且不会使用任何子像素垃圾破坏渲染图像吗?

- Tristan

考虑添加“反锯齿”标签？ - maerics

3

可以参考这个链接：https://dev59.com/TnVC5IYBdhLWcg3wvT_g如何在HTML的画布元素上关闭抗锯齿效果？请提供相关信息。 - mwolfetech

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tristan · Accepted Answer

经过一番详尽的研究，似乎没有标准化的方法可以停止我所经历的反走样现象。

这种情况是反走样依赖于浏览器，只能针对某些绘图操作启用或禁用。

在这个stackoverflow问题中有一些技巧可以避免某些情况下的反走样：Can I turn off antialiasing on an HTML <canvas> element?

但唯一适合我的方法是手动实现自己的绘图函数来生成我想要的形状，而不带任何反走样。这将通过canvas putImageData函数完成，这里有一个关于如何使用它的优秀教程。

目前还没有API支持的解决方案来解决这个问题。