Проблема с масштабированием изображения Canvas HTML5

Я пытаюсь создать тематическую игру с пиксельным изображением в холсте HTML5, и в качестве части этого я беру изображения размером 10x20 или около того и рисую их на холст с помощью следующего кода:

Однако на холсте используется масштабирование бикубического изображения, и, следовательно, изображения с изображением пикселей выглядят ужасно в 2x и выше. Есть ли способ заставить холст использовать масштабирование ближайшего соседа или, возможно, использовать собственный метод масштабирования изображений? Если это не означает, что изображения нужно заранее масштабировать в виде Paint.net?

Ответы

Ответ 1

Выберите любое из следующих действий:

Через JavaScript:

ctx.imageSmoothingEnabled = false;

^{Источник: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#image-smoothing}

В Gecko вам понадобится

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. Это намного больше работает.