我试图在HTML5画布中制作一个像素艺术的主题游戏，作为其中的一部分，我将使用10×20左右大小的图片，并使用以下代码将其绘制到画布上：
ctx.drawImage(image,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);
</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.这是更多的工作，但是。