ПРИМІТКА . Це пов'язано з тим, як відображаються наявні елементи полотна при масштабуванні , а не з тим, як лінії чи графіки відображаються на поверхні полотна . Іншими словами, це є всещоб зробити з інтерполяцією з масштабованих елементів , і нічого спільного з згладжуванням графічної втягується на полотні. Мене не хвилює те, як браузер малює лінії; Мене хвилює те, як браузер відображає сам елемент полотна , коли його масштабують.
Чи є властивість полотна чи налаштування браузера, який я можу змінити програмно, щоб відключити інтерполяцію при масштабуванні <canvas>елементів? Рішення крос-браузера ідеально, але не є істотним; Мої основні цілі - веб-браузери. Продуктивність дуже важлива.
Це питання є найбільш подібним, але недостатньо ілюструє проблему. Що варто, я намагався image-rendering: -webkit-optimize-contrastбезрезультатно.
Додаток буде «ретро» 8-бітною стильовою грою, написаною на HTML5 + JS, щоб зрозуміти, що мені потрібно.
Для ілюстрації, ось приклад. ( пряма версія )
Припустимо, у мене полотно 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... що має css, який робить елемент у 5 разів більшим (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Я малюю простий X на полотні так:
$('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();
});Зображення ліворуч - це те, що показує Chromium (14.0). Зображення праворуч - це те, що я хочу (намальовано вручну для ілюстративних цілей).
