html5 canvas缩放图片,HTML5画布图像缩放问题

选择以下任何一项：

通过JavaScript：

ctx.imageSmoothingEnabled = false;

在壁虎上，你需要

ctx.mozImageSmoothingEnabled = false;

在Webkit上，您需要

ctx.webkitImageSmoothingEnabled = false;

我在其他浏览器上找不到有关此属性的支持信息，所以他们可能不支持。

通过CSS：

另一个选择是在画布上使用一组CSS规则。例如：

var c = document.getElementById("c"),cx = c.getContext("2d"),im = new Image();

im.src = "http://stackoverflow.com/favicon.ico"; // 16x16

cx.drawImage(im,0);

canvas {

width: 32px;

height: 32px;

image-rendering: optimizeSpeed;

image-rendering: crisp-edges;

image-rendering: -moz-crisp-edges;

image-rendering: -o-crisp-edges;

image-rendering: -webkit-optimize-contrast;

-ms-interpolation-mode: nearest-neighbor;

}

通过像素例程：