HTML5画布图像缩放问题

我试图在HTML5画布上的像素艺术为主题的游戏，而随着这部分我拿10×20左右大小的图像，并用下面的代码绘制它们在画布上：HTML5画布图像缩放问题

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

但是画布使用双三次图像缩放，因此像素艺术图像在2x和更高处看起来很糟糕。有没有办法强制画布使用最近邻居缩放或可能使用自定义方法来缩放图像？如果不是这意味着图像必须事先缩放到像Paint.net这样的东西吗？

来源

2012-05-09 dagronlund

选择下列任何一个：

通过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。不过，这还有很多工作要做。

来源

2012-05-09 22:42:41 Snowball

谢谢，那正是我所需要的。 – dagronlund

什么是完整的答案！ – fuzzyTew

是否有意在CSS定义中使用宽度和高度为200，而画布的原始大小为100 * 100？ –

HTML5画布图像缩放问题

回答

相关问题