HTML5 Canvas skalowanie obrazu Issue

Question

Próbuję dokonać pixel sztuki stylu gry w HTML5 canvas, jak i części, które biorę 10x20 lub takie wymiary obrazów i narysować je na płótno za pomocą następującego kodu:

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

Jednak na płótnie używane jest dwubarwne skalowanie obrazu, dlatego obrazy w pikselach wyglądają strasznie w dwóch i więcej miejscach. Czy istnieje sposób na zmuszenia płótna do użycia skalowania najbliższego sąsiada lub użycia niestandardowej metody skalowania obrazów? Jeśli nie, to znaczy, że obrazy muszą być wcześniej skalowane w coś w rodzaju Paint.net?

Answer 1

wybrać dowolną z następujących czynności:

---

Via JavaScript:

ctx.imageSmoothingEnabled = false; 

^{Źródło: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

Na Gecko, będziesz potrzebować

ctx.mozImageSmoothingEnabled = false; 

^{Źródło: https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#Gecko-specific_attributes}

Na Webkit, musisz

ctx.webkitImageSmoothingEnabled = false; 

^{Źródło: https://bugs.webkit.org/show_bug.cgi?id=82804}

nie mogę znaleźć informacje na poparcie tej nieruchomości na innych przeglądarkach , więc prawdopodobnie nie obsługują tego.

---

Via CSS:

Inną opcją jest użycie zestawu reguł CSS na płótnie. Na przykład:

<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> 

^{Źródło: https://developer.mozilla.org/en/CSS/image-rendering
Źródło: https://bugs.webkit.org/show_bug.cgi?id=56627}

---

Via rutyny pikseli:

Jeszcze innym rozwiązaniem jest to zrobić samemu za pomocą płótna procedury manipulacji pikselami: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation. Ale to znacznie więcej pracy.