HTML5画布图像缩放问题(HTML5 Canvas Image Scaling Issue)

我试图在HTML5画布像素艺术为主题的游戏，并为我取10×20左右大小的图像，并吸引他们到下面的代码画布部分：

ctx.drawImage(image, 20, 20, 100, 200);

然而画布使用双三次图像缩放，因此像素艺术图像看起来可怕以2x和向上。有没有办法迫使帆布使用近邻缩放或可能使用自定义的方法来缩放图像？如果不是这是否意味着图像必须在类似Paint.net事先比例？

选择下列任何一个：

通过JavaScript：

ctx.imageSmoothingEnabled = false;

^{来源： http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

在壁虎，你需要

ctx.mozImageSmoothingEnabled = false;

^{来源： https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes}

WebKit的，你需要

ctx.webkitImageSmoothingEnabled = false;

^{来源： https://bugs.webkit.org/show_bug.cgi?id=82804}

我无法找到支持其他浏览器上这个属性的信息，因此他们可能不支持它。

通过CSS：

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

<canvas id="c" width="16" height="16"></canvas>
<script>
  var c = document.getElementById("c"),
      cx = c.getContext("2d"),
      im = new Image();
  im.src = "http://stackoverflow.com/favicon.ico"; // 16x16
  cx.drawImage(im, 0, 0);
</script>
<style>
  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;
  }
</style>

^{来源： https://developer.mozilla.org/en/CSS/image-rendering}
^{来源： https://bugs.webkit.org/show_bug.cgi?id=56627}

通过像素套路：

然而，另一种选择是使用画布像素处理例程自己做： http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation 。这是一个很多工作，虽然。