Вы можете «увеличить» холст, масштабируя контекст холста перед командами рисования, чтобы в результате элементы плавно отображались в большем размере. Например, см. мой пример , позволяющий увеличить масштаб элементов рисования и просмотреть детали, недоступные при презентации по умолчанию.
Проблема с масштабированием браузера заключается в том, что холст 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/ ( код )
Вот как это выглядит при увеличении:
В качестве дополнительного бонуса ваш холст также будет печатать более плавно (в случае, если кто-то увлекается деревьями).