画布drawImage质量

这是一个.png图像(在右边)和画布元素,我画了图像(在左边).你能注意到质量差异吗？画布呈现出明显的质量损失的图像.我们可以做什么？

我在Chrome和IE9上观察到这个结果.其他人也许会做同样的事情.
我如何渲染图像是很平常的：在脚本中,我创建一个新的Image()对象,加载后我调用
context.drawImage(myimage,x,y);

编辑：

这是我在画布上观察到的初始图像：

这是我在写完之后画出的东西：
context.drawImage(MYIMAGE,parseInt函数(x)中,parseInt函数(Y));

我能说什么,好回答人.最好的拍摄.帽子是给你的.

EDIT2：

我试过context.drawImage(myimage,parseInt(x)0.5,parseInt(y)0.5);这里是结果：

我觉得比第一个更糟糕.我在chrome上观察到这一点,在IE9上它差不多.

解决方法

我刚刚创建了两个图像的叠加,以便它们相互抵消.
它没有工作,我有边缘的困难.

请检查您的坐标x,y是否为整数.
这里使用浮点数可能会模糊您的图像,因为一些实现尝试将其“像素之间”

context.drawImage(myimage,parseInt(x),parseInt(y));

如果这还不行,请尝试使用整数值0.5
我知道对于OpenGL实现,你必须使用0.5的坐标才能击中一个像素的中心.

context.drawImage(myimage,parseInt(x)+0.5,parseInt(y)+0.5);

编辑：

在Html5Rocks上查看this page！

原文地址：https://www.jb51.cc/html5/168704.html