UWAGA : Ma to związek ze sposobem renderowania istniejących elementów kanwy po przeskalowaniu , a nie ze sposobem renderowania linii lub grafiki na powierzchni płótna . Innymi słowy, to ma wszystko wspólnego z interpolacją do skalowanych elementów i nie ma nic wspólnego z antialiasing grafiki są rysowane na płótnie. Nie obchodzi mnie, jak przeglądarka rysuje linie; Dbam o to, jak przeglądarka renderuje sam element canvas , gdy jest skalowany.
Czy istnieje właściwość kanwy lub ustawienie przeglądarki, które mogę zmienić programowo, aby wyłączyć interpolację podczas skalowania <canvas>elementów? Rozwiązanie dla różnych przeglądarek jest idealne, ale nie jest niezbędne; Moim głównym celem są przeglądarki oparte na Webkit. Wydajność jest bardzo ważna.
To pytanie jest najbardziej podobne, ale nie ilustruje wystarczająco problemu. image-rendering: -webkit-optimize-contrastBezskutecznie próbowałem .
Aplikacja będzie "retro" 8-bitową grą napisaną w HTML5 + JS, aby było jasne, czego potrzebuję.
Aby to zilustrować, oto przykład. ( wersja na żywo )
Załóżmy, że mam płótno 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... który ma css, który sprawia, że element jest 5 razy większy (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Rysuję na płótnie prosty „X” w następujący sposób:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});Obraz po lewej stronie renderuje Chromium (14.0). Obraz po prawej jest tym, czego chcę (narysowany ręcznie w celach ilustracyjnych).
