HTML5 Canvas 避免任何子像素渲染
如此处所示。我遇到了一些问题画布中的亚像素精度。现在我拥有更多。我正在尝试渲染硬边等距正方形，如我提供的链接中的图像所示。稍后尝试处理渲染图像中的像素数据并提取当前颜色。
但由于子像素问题，我收到的颜色实际上并不存在于原始图像中！无论我似乎从哪里开始绘制您在图像中看到的线（无论是从 [1,1] 到 [10,10] 还是 [1.5, 1.5] 到 [10.5, 10.5]，这只是一个例如）我总是得到这些子像素颜色，它们破坏了我的结果！
有谁知道我如何避免这种情况或建议我应该绘制伪等距线（伪如像素艺术等距角）的正确方法，所以我的形状上有很好的硬边缘，并且我不会用任何东西破坏渲染图像一种亚像素垃圾。
As seen here. I have been having a few issues with sub pixel precision in the canvas. Now I'm having even more. I'm trying to render hard edged isometric squares as shown in the image in the link I provided. In an attempt to later work through the pixel data in the rendered image and extract the present colors.
But because of the sub pixel issue im having I'm receiving colors that aren't actually present in the original image! And no matter where i seem to start drawing the line you see in the image (whether it be at from [1,1] to [10,10] or [1.5, 1.5] to [10.5, 10.5], this is just an example) I am always getting these sub pixel colors that are ruining my results!
Does anyone know how I can avoid this or suggest the correct way I should draw a pseudo-isometric line (pseudo as in pixel art isometric angles) So I have nice hard edges on my shapes and I'm not ruining the rendered image with any sort of sub-pixel garbage.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
经过一些详尽的研究后，似乎没有标准化的方法来阻止我所经历的事情。
抗锯齿功能只能针对某些绘图操作启用或禁用，具体取决于浏览器。
在这个堆栈溢出问题中，有一些关于如何在某些情况下避免抗锯齿的技巧：我可以关闭 HTML
但唯一对我有用的是手动实现我自己的绘图函数来生成我想要的形状，而无需任何抗锯齿。这将通过 canvas putImageData 函数完成，并且有一个很好的教程 right这里介绍了使用它的方法。
暂时没有api支持的解决方案来解决这个问题
Well after some exhaustive research there seems to be no standardized way to stop what I'm experiencing.
Which is anti-aliasing that depending on the browser can only be enabled or disabled for certain drawing operations.
There are a few tricks on how to avoid anti-aliasing in some situations in this stack overflow question: Can I turn off antialiasing on an HTML <canvas> element?
But the only one that will work for me is to manually implement my own drawing functions to produce the shapes I want without any anti-aliasing. This will be done with the canvas putImageData function and there is a good tutorial right here on ways of using this.
For the time being there is no api supported solution for the problem