Поддерживает ли HTML5 холст поддержку масштабирования на основе браузера?

Я установил простой холст с нарисованным на нем fillText. Это выглядит неплохо, но когда я использую функцию браузера с масштабированием (Safari, Firefox), сглаживание выглядит уродливо.

Я попытался использовать scale() поднять сетку, но это не помогает.

Есть ли способ рисовать на холсте, что он выглядит четким даже при увеличенном окне браузера?

Снимок экрана (без увеличения): http://i.stack.imgur.com/CGWka.png

Снимок экрана (макс. масштаб): http://i.stack.imgur.com/vNPjF.png

Ответ 1

Вы можете "масштабировать" холст путем масштабирования контекста canvas до того, как команды рисования приведут к тому, что элементы будут рисоваться в большем размере, плавно. Например, см. этот пример моего, который позволяет вам увеличить масштаб на элементах рисования и просмотреть детали, недоступные в представлении по умолчанию.

Проблема с масштабированием браузера заключается в том, что HTML5-холст, как JPG или PNG, и в отличие от SVG-основан на отдельных пикселях. Если вы нарисуете круг в 10 пикселей, а затем скажите браузеру увеличить его до 50 пикселей, браузер не сможет "изобрести" данные, чтобы нарисовать гладкий круг. Лучшее, что он может сделать, это предоставить интерполяцию изображений, чтобы попытаться сделать "большие пиксели" более гладкими.

Решение

С изображением вы можете сделать снимок с большим количеством пикселей (например, 1000x800) и сообщить браузеру о его отображении на другом, меньшем размере (например, 250x200). Когда браузер приближается, он отображает больше пикселей. Например:

<img src="1000x800.jpg" style="width:250px; height:200px">

Вы можете сделать то же самое с холстом. Количество пикселей данных в холсте определяется атрибутами height и width (в HTML или JavaScript). Вы можете отдельно указать размер экрана CSS (например, выше) до меньшего размера. Вам даже не нужно изменять существующий код рисования холста; просто:

Отрегулируйте height и width вашего холста определенным фактором (например, 4),
Используйте CSS, чтобы установить высоту и ширину отображения на исходный размер, а затем
Перед всеми другими командами рисования увеличьте свой контекст с помощью ctx.scale(4,4).

Изменить. Я создал пример этого здесь:
http://jsfiddle.net/u5QPq/embedded/result/ (code)

Вот как это выглядит, когда вы увеличиваете масштаб:

В качестве дополнительного бонуса ваш холст также будет печатать более плавно (в случае, если кто-то убивает деревья).