HTML5: элемент canvas / CanvasRenderingContext2D
Говоря об HTML5, нельзя оставить без внимания элемент canvas.
Элемент canvas — практически то же самое, что и элемент img; единственное отличие состоит в том, что он не статический, а динамический.
Элемент canvas задает особое место на странице с определенными размерами, где можно динамически (то есть программно) отображать картинки, анимацию и т. д. С его помощь можно, например, динамически генерировать схемы и графики, создавать браузерные приложения для рисования (или даже для редактирования текста) или браузерные игры — в общем, все то же, что можно сделать с помощью плагинов (таких, как Flash).
Интерфейс CanvasRenderingContext2D
Также элемент canvas можно рассматривать как часть двухкомпонентного «свойства Canvas», которое включает еще и интерфейс программирования приложений CanvasRenderingContext2D, без которого невозможно использовать это свойство в полную силу. Сравните этот элемент с другими интерактивными элементами, появившимися в HTML5 (например, video), которые можно прекрасно использовать и без соответствующих API. Но для canvas это не так.
Детали, касающиеся использования элемента canvas, касаются главным образом программирования на JavaScript с помощью CanvasRenderingContext2D API. Этот элемент — скорее не свойство разметки, а хитрый прием, позволяющий решать задачи программирования.
SVG как альтернатива canvas
Если вы не очень хорошо знакомы с JavaScript, вам вряд ли стоит сразу использовать canvas для добавления анимации и интерактивных изображений. Попробуйте сначала проверить, может ли SVG справиться с поставленной задачей. Если вы занимаетесь в основном написанием разметки или дизайном, вам, возможно, больше понравятся принципы декларативного программирования, использующиеся в SVG (и напоминающие принципы CSS), чем принципы императивного программирования, которые лежат в основе canvas.- ↑ Веб-дизайн
- ← HTML5: добавление видеоконтента — элемент video
- → HTML5: новые типы форм и их свойства