HTML5 Canvas 避免任何亚像素渲染

如

但唯一对我有用的是手动实现我自己的绘图功能以生成我想要的形状而无需任何抗锯齿.这将通过 canvas putImageData 函数完成，并且有一个很好的教程 就在这里关于使用它的方法.

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

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.

解决方案

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