As seen here. https://stackoverflow.com/questions/7017998/html-5-canvas-avoid-fill-behaviour-on-overlap我在画布中的亚像素精度方面遇到了一些问题。现在我拥有更多。我正在尝试渲染硬边等距正方形,如我提供的链接中的图像所示。稍后尝试处理渲染图像中的像素数据并提取当前颜色。
但由于子像素问题,我收到的颜色实际上并不存在于原始图像中!无论我似乎从哪里开始绘制您在图像中看到的线(无论是从 [1,1] 到 [10,10] 还是 [1.5, 1.5] 到 [10.5, 10.5],这只是一个例如)我总是得到这些子像素颜色,它们破坏了我的结果!
有谁知道我如何避免这种情况或建议我应该绘制伪等距线(伪如像素艺术等距角)的正确方法,所以我的形状上有很好的硬边缘,并且我不会用任何东西破坏渲染图像一种亚像素垃圾。
经过一些详尽的研究后,似乎没有标准化的方法来阻止我所经历的事情。
抗锯齿功能只能针对某些绘图操作启用或禁用,具体取决于浏览器。
在这个堆栈溢出问题中,有一些关于如何在某些情况下避免抗锯齿的技巧:我可以关闭 HTML 元素上的抗锯齿功能吗? https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element
但唯一对我有用的方法是手动实现我自己的绘图函数来生成我想要的形状,而不需要任何抗锯齿。这将通过画布 putImageData 函数完成,并且有一个很好的教程就在这儿 http://hacks.mozilla.org/2009/06/pushing-pixels-with-canvas/关于使用它的方法。
暂时没有api支持的解决方案
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)