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

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

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

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


html html5-canvas nearest-neighbor bicubic
person dagronlund    schedule 09.05.2012    source источник

Ответы (1)


arrow_upward
40
arrow_downward

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

С помощью 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#манипуляцииспикселями. Однако это намного больше работы.

person Snowball    schedule 09.05.2012
comment
Спасибо, это было именно то, что мне было нужно. - person dagronlund; 10.05.2012
comment
Какой полный ответ! - person fuzzyTew; 27.07.2013
comment
Было ли преднамеренно использовать ширину и высоту как 200 в определении CSS, в то время как исходный размер холста был 100 * 100? - person Satya Kalluri; 18.03.2014
comment
@SatyaKalluri: Да. Если вы установите ширину, высоту: 200 пикселей в CSS и ширину, высоту = 100 в HTML, каждый пиксель на холсте отображается как 2 × 2 пикселя на экране. - person Snowball; 18.03.2014
comment
Вы что-то упустили в своем css: image-rendering: -moz-crisp-edges Вот как вы это делаете в firefox. - person Daniel Kaplan; 29.06.2014
comment
@tieTYT: Спасибо! Поведение Firefox, должно быть, изменилось с тех пор, как я опубликовал это. Обновлено. - person Snowball; 30.06.2014