相关疑难解决方法(0)

请看下面的例子:

http://jsfiddle.net/MLGr4/47/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

img = new Image();
img.onload = function(){
    canvas.width = 400;
    canvas.height = 150;
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150);
}
img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

如您所见,虽然据说drawImage会自动应用抗锯齿,但图像不会消除锯齿.我尝试了很多不同的方法,但似乎没有用.你能告诉我如何获得抗锯齿图像吗？谢谢.

这是一个.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上它有点像坏一样.