17

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

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

右：我想要的，左：我得到的

编辑：

这是我在画布上观察到的初始图像：
更详细：我首先得到了什么

这是我写完后画布呈现的内容：
context.drawImage(myimage,parseInt(x),parseInt(y));
更详细地说：我用圆角坐标得到什么

我能说什么，伟大的回答人。最好的锐化。帽子给你了。

编辑2：

我试过context.drawImage(myimage, parseInt(x) + 0.5, parseInt(y)+ 0.5);了，结果如下：

更详细：最坏情况

我认为这比第一个更糟糕。我在 chrome 上观察到这一点，在 IE9 上它有点糟糕。

4

3 回答 3

11

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

叠加图像

请检查您的坐标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 上查看此页面！

于 2012-10-18T05:42:22.443 回答
7

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

这是因为图像平滑，默认情况下默认为画布上的双线性/trilieaner/bicubic 等平滑算法，而您想要的称为最近邻。

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

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

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

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

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

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

于 2012-10-18T18:57:46.730 回答
-1

我认为这个链接会很有帮助。我做了同样的事情，但在我的情况下，我使用 javascript 动态地给画布重量和高度。然后我在声明时将高度和宽度指定给画布。即解决问题。

于 2014-10-14T10:50:53.220 回答