Имам спрайт, който анимира с помощта на лист със спрайтове. Той е само 16x16, но искам да го мащабирам до около 64x64 в цялата му доброта на пикселите!
Резултатите са ужасни, разбира се браузърът го анти-алиасинг. :/
Благодаря!
РЕДАКТИРАНЕ: Не е необходим 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)
В случай, че някой някога се натъкне на това отново (като мен), Webkit поддържа -webkit-optimize-contrast стойност за image-rendering, което (в момента) е реализация на мащабирането на най-близкия съсед. Може да се прилага както върху изображения, така и върху платна.
Ето един пример как става.
.nn128 {
width: 128px;
height: 128px;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">
С тази настройка както WebkitSafari, така и Gecko/Firefox ще увеличат пространството на платното 16x16 и малкото изображение до 128x128 с алгоритъма за най-близък съсед.
АКТУАЛИЗАЦИЯ Отговорът първоначално посочва, че браузърите Webkit поддържат това; всъщност от 2011-12-24 той работи със Safari на Mac OS и Chrome на Mac OS, но не и с Chrome one Windows (Safari на Windows не е проверен), както е посочено на Проблем 106662 на програмата за проследяване на грешки в Chromium. Лексически, Chrome под Windows ще приеме стойността -webkit-optimize-contrast в CSS style sheet, но това няма да има никакъв ефект. Очаквам, че ще проработи някой ден и този метод ще бъде правилният начин за увеличаване на най-близкия съсед, но засега използването на този метод означава, че потребителите на Windows Chrome ще трябва да живеят с размазването.
-webkit-optimize-contrast очевидно не прави нищо, за да промени начина, по който се интерполират изображенията. Той приема стойността за image-rendering, така че трябва да има известно ниво на поддръжка; може би е счупено?
- person namuol; 01.10.2011
-webkit-optimize-contrast, но няма никакъв ефект. Въпреки това работи добре в WebKit nightlies.
- person Tower; 24.12.2011
Във Firefox можете да използвате това:
canvas {
image-rendering: -moz-crisp-edges;
}
Но доколкото знам за всеки друг браузър нямате късмет. Един от начините за заобикаляне на това може би е да увеличите своя спрайт до 64x64 във Photoshop (или каквото и да е), след което да го използвате намален в canvas. По този начин поне изображението няма да се замъгли при „увеличаване“. Все пак няма да ви даде чистия режим7 като добротата на най-близкия съсед.
Можете да напишете свой собствен код за мащабиране, като използвате обекта imageData. По този начин ще понесете значителна загуба на производителност, но за изображение 16x16 може да не е толкова значителна.
