HTML5 Canvas bitmaps

Question

Я создаю игру в стиле ретро, ​​в которой используются пиксельные изображения. Я еще не создал эти образы, потому что хотел знать, как лучше всего это делать.

Эти изображения, вероятно, будут 16 или 32 квадратами PX, но я хотел бы иметь возможность масштабировать изображения так же сильно, как мне нравится, просто без размытия/искажения.

Какой формат следует использовать? И как мне импортировать их на мой холст. также?

РЕДАКТИРОВАТЬ # 1: Исправлена ​​опечатка & Вставить Q еще раз по теме. (Спасибо Спенс за указание его)

Answer 1

Создание больших изображений значков, к которым применяется эффект плитки 16x16 или 32x32. Затем, когда вы пишете их на холст (после загрузки изображения, конечно) масштабировать их до размера вы хотите использовать

context.drawImage(img,x,y,width,height); 

Размеры файлов вряд ли сильно прыгать, так как каждая плитка должна сжать довольно легко.

Answer 2

Try «Inkscape», его бесплатно

https://inkscape.org/en/

использует формат SVG (скалярная векторной графики), так что вы сможете масштабировать изображения, как большой, как вам нравится, просто без размытия/искажения.

Answer 3

Единственный способ увеличить без любой размытие или искажение превратит каждый 1 пиксель в набор 2x2, 3x3, ... пикселей.

Например, синий синим пикселем в левом верхнем углу изображения станет набор из четырех синих пикселей в [0,0], [1,0], [0,1] & [1,1 ]. И то же самое для каждого другого пикселя на исходном изображении. Полученное изображение будет в два раза больше ширины & высоты исходного изображения.

Поскольку ваш графический стиль является пиксельным изображением, эта настройка сохранит вашу пикселизацию, а также увеличит исходное изображение.

Вы можете запрограммировать функцию, которая использует холст html5 в памяти, чтобы «изменить размер путем умножения» исходных изображений по мере необходимости. Это будет использовать способность canvas устанавливать значения RGBA для каждого пикселя, используя context.getImageData и context.putImageData.

Answer 4

CanvasContext2d имеет возможность отключить сглаживание изображения: imageSmoothingEnabled, для которого по умолчанию установлено значение true.

В соответствии с the specs, если установлено ложное,

Изображение [нарисованы drawImage() методом] должны быть визуализированы с использованием nearest-neighbor interpolation.

Этот алгоритм такой же, как предложенный @markE в his answer.

К сожалению, браузеры по-прежнему используют префикс поставщика для этого атрибута, и он не был реализован как в IE9, так и в IE10 ...

var img = document.querySelector('img'), 
 
    canvas = document.querySelector('canvas'), 
 
    ctx = canvas.getContext('2d'); 
 

 
// draw the image 
 
img.onload = function(){ 
 
    canvas.width = img.width*50; 
 
    canvas.height = img.height*50; 
 
    // disable smoothing after we change canvas' width/height 
 
    ctx.mozImageSmoothingEnabled = false; 
 
    ctx.webkitImageSmoothingEnabled = false; 
 
    ctx.msImageSmoothingEnabled = false; 
 
    ctx.imageSmoothingEnabled = false; 
 
    ctx.drawImage(img, 0,0, canvas.width, canvas.height); 
 
    } 
 
//32x32px image taken from https://stackoverflow.com/q/31910043/3702797 
 
img.src="http://i.stack.imgur.com/3Sp5x.png"

canvas{border:.5px solid}

<img/> 
 
<canvas></canvas>

^{прокрутки, чтобы увидеть уменьшенное изображение в холст}