ПРИМЕЧАНИЕ. Это связано с тем, как визуализируются существующие элементы холста при масштабировании, не, чтобы сделать, как линии или графика отображаются на поверхности холста. Другими словами, это имеет все, что связано с интерполяцией масштабированных элементов, и не имеет никакого отношения к сглаживанию графики, нарисованной на холсте. Меня не интересует, как браузер рисует строки; Я забочусь о том, как браузер отображает сам элемент холста при его масштабировании.
Есть ли свойство canvas или параметр браузера, который я могу изменить программно, чтобы отключить интерполяцию при масштабировании элементов <canvas>? Кросс-браузерное решение идеально, но не обязательно; Основными задачами являются браузеры на основе Webkit. Производительность очень важна.
Этот вопрос наиболее похож, но недостаточно иллюстрирует проблему. Для чего это стоит, я пробовал 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). Изображение справа - это то, что я хочу (рисованный для иллюстративных целей).
