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畫布圖像縮放問題

回答

相關問題