Ближайший Сосед, представляющий в Холсте
У меня есть спрайт, который анимирует использование листа спрайта. Он только 16x16, но я хочу масштабировать его до приблизительно 64x64 во всем его пиксельном-y совершенстве!
Результаты ужасны, конечно, браузер выступает против искажения его.:/
Спасибо!
Править: Никакая необходимая CSS, вот не является моей функцией ничьей.
function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}
Посмотрите его вид работы здесь (codepen)
1 ответ
В Firefox вы можете использовать это:
canvas {
image-rendering: -moz-crisp-edges;
}
Но, насколько я знаю, для всех остальных браузеров вам не повезло. Один из способов обойти это, возможно, состоит в том, чтобы увеличить ваш спрайт до 64x64 в Photoshop (или любом другом), а затем использовать его в уменьшенном масштабе в canvas. Таким образом, по крайней мере, изображение не будет расплываться при "увеличении". Однако это все равно не даст вам чистого режима 7, как у ближайшего соседа.
Вы можете написать свой собственный код масштабирования, используя объект imageData. При этом вы понесете значительные потери производительности, но для изображения 16x16 они могут быть не столь значительными.