ПРИМЕЧАНИЕ . Это связано с тем, как существующие элементы холста отображаются при увеличении масштаба , а не в том, как линии или графика отображаются на поверхности холста . Другими словами, это есть всечтобы сделать с интерполяцией из масштабируемых элементов , и ничего общего с сглаживанием графической втягивается на холсте. Меня не волнует, как браузер рисует линии; Я забочусь о томкак браузер делает холст элементу себя , когда она масштабируется до.
Есть ли свойство холста или параметр браузера, который я могу изменить программно, чтобы отключить интерполяцию при масштабировании <canvas>элементов? Кроссбраузерное решение идеально, но не обязательно; Моя основная цель - браузеры на основе Webkit. Производительность очень важна.
Этот вопрос наиболее похож, но недостаточно иллюстрирует проблему. Как бы то ни было, я безуспешно пытался image-rendering: -webkit-optimize-contrast.
Приложение будет представлять собой 8-битную игру в стиле «ретро», написанную на HTML5 + JS, чтобы было понятно, что мне нужно.
Для иллюстрации приведу пример. ( живая версия )
Допустим, у меня холст 21х21 ...
<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 */Я рисую простой крестик на холсте, вот так:
$('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). Изображение справа - это то, что я хочу (нарисовано от руки в иллюстративных целях).
