画布drawImage质量

Question

这是一个.png图像（右侧），以及我在（左侧）绘制图像的画布元素。你能注意到质量差异吗？ Canvas使图像质量明显下降。我们能做什么？

我在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上，它与坏的一样。

Answer 1

我刚刚创建了两个图像的叠加层，以便它们相互抵消。 它不起作用，边缘有困难。

请检查您的坐标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！

Answer 2

我知道这已经得到了解答，但我想提供更多信息来讨论这里发生了什么以及可以做些什么。

---

这是因为图像平滑，默认情况下默认为平滑算法，如画布上的bilinear / trilieaner / bicubic，而你想要的则称为最近邻居。

该规范最近添加了一个名为imageSmoothingEnabled的属性，默认为true，并确定在非整数坐标上绘制或绘制缩放的图像是否将使用更平滑的算法。如果设置为false则使用最近邻居，从而产生不太平滑的图像，而只是制作更大的像素。

图像平滑最近才被添加到画布规范中，并不是所有浏览器都支持，但是某些浏览器已经实现了此属性的供应商前缀版本。在上下文中，Firefox中存在mozImageSmoothingEnabled，Chrome和Safari中存在webkitImageSmoothingEnabled，并且将这些设置为false将停止发生反锯齿。不幸的是，在撰写本文时，IE9和Opera尚未实现此属性，供应商前缀或其他。

一般来说，您只需遵循两条规则：

1. 如果要缩放画布，则需要禁用图像平滑或使用最近邻插值对其进行缩放。现在手动执行此操作有一些算法，这就是上述选项的作用。
2. 如果您没有使用整数坐标，则会遇到相同的问题，并且它具有相同的解决方案。如果您的浏览器上不存在上述选项，则需要恢复为整数坐标(x | 0, y | 0)

快速x | 0楼层x，但不适用于大于2,147,483,647的数字：最大的32位有符号整数。

希望你的坐标不大于那个！

Answer 3

我认为这link将会有所帮助。我做了同样的但在我的情况下，我使用JavaScript动态地给出画布重量和高度。然后，当我宣布它时，我给了画布高度和宽度。那解决了这个问题。