Авторизация
Авто Чувашия

Рисование средствами HTML5. Элемент canvas.


Еще одним прекрасным дополнением в спецификации HTML5 является элемент canvas и связанный с ним API-интерфейс двухмерного рисования. Элемент canvas создает область на веб-странице, в которой вы можете рисовать, используя набор функций jаvascript для создания линий, фигур, заливок, текста, анимации и т. п. Вы можете использовать эту область для отображения иллюстрации, но источник большого потенциала элемента canvas (и восхищения, вызванного им в мире веб-разработчиков) в том, что все это создается с помощью веб-сценариев.
Это значит, что элемент canvas динамичен, позволяет рисовать предметы на лету и реагировать на действия пользователя. Так он становится отличной платформой для создания анимаций, игр и даже целых приложений с помощью собственного функционала браузера и без плагинов таких, как Flash.

Хорошая новость в том, что элемент canvas, на момент написания статьи, поддерживается всеми текущими версиями браузеров, за исключением, как всегда, Internet Explorer 8 и более ранних версий.

Элемент canvas можно использовать для создания игр, рисования программ, интерактивного инструмента воссоздания молекулярной структуры и анимации астероида. Дополнительные примеры можно найти на сайте canvasdemos.com. Приемы использования элемента canvas нельзя изложить полностью в одной статье, особенно без опыта работы с jаvascript.


Двухмерная динамическая область для рисования при помощи элемента canvas.
С помощью элемента canvas можно добавить на страницу область холста и указать его размеры, используя атрибуты width и height. И на этом фактически разметка заканчивается. Для браузеров, которые не поддерживают элемент canvas, можно обеспечить внутри тегов резервный контент (сообщение, изображение или любой подходящий материал). Разметка только освобождает пространство для рисования.

Рисование с помощью jаvascript.
API-интерфейс двухмерного рисования включает в себя функции для создания базовых фигур (такие, как strokeRect() для рисования прямоугольного контура и BeginPath() для рисования линии) и их перемещения (например, rotate() и scale() а также атрибуты для применения стилей (например, lineWidth, strokeStyle, fillStyle, and font).

Добавить свой комментарий, претензию, жалобу

Кликните на изображение чтобы обновить код, если он неразборчив




Случайные публикации

Опрос

Оцените обслуживание клиентов в ГИБДД Чувашии по 5 бальной шкале