↑ HTML5 Canvas | ||||
Урок - Основы использования Canvas | ||||
Текущий урок - первый. |
Следующий урок → Урок - Линии и дуги, кривые Бернштейна-Безье
|
Обзор
Спецификация HTML 5 включает множество новых функций, одной из которых является элемент <canvas>.
HTML 5 Canvas (канва HTML 5) предоставляет простой и мощный способ вывода графики и рисования с использованием JavaScript.
Gecko поддерживает элемент <canvas> с версии 1.8 (версия 1.5 браузера Firefox).
Presto поддерживает элемент <canvas> с версии 9.0 веб-браузера Opera.
Internet Explorer 9 поддерживает элемент <canvas>, начиная с Platform Preview 3. Ранее ситуацию с отсутствием <canvas> в IE исправила компания Google, выпустившая расширение на JavaScript, под названием ExplorerCanvas.
На сегодняшний день <canvas> чаще используется для построения графиков, простой анимации и игр в веб-браузерах. Группа WHATWG предлагает использовать <canvas> как стандарт для создания графики в новых поколениях веб-приложений.
Организация Mozilla Foundation ведёт проект под названием Canvas 3D, целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML элемент <canvas>.
Элемент Canvas. Создание Канвы.
Для каждого элемента canvas можно использовать контекст, в котором нужно вызвать команды JavaScript для рисования на Canvas. Браузеры могут реализовывать несколько контекстов элемента canvas и предоставлять различные API для рисования. Следует также помнить, что рисование происходит в растровой форме, то есть, нарисовав на канве какую-либо фигуру, её нельзя будет изменить или удалить отдельно, — можно только стереть целую область канвы.
Большинство современных браузеров предоставляют возможности 2D-контекста (2D Canvas) — Opera, Firefox, Konqueror и Safari. Кроме того существуют экспериментальные сборки браузера Opera, которые включают поддержку 3D-контекста (3D Canvas), а также дополнение к Firefox, которое реализует поддержку 3D Canvas.
Чтобы создать Canvas-контекст, достаточно просто добавить элемент <canvas> в HTML-документ:
<canvas id="imgExample1" width="300" height="150">
Альтернативное содержимое, которое будет показано, если браузер не поддерживает Canvas.
</canvas>
Нужно добавить идентификатор к элементу canvas, чтобы потом обратиться к нему в JavaScript, также необходимо задать атрибуты width и height для определения ширины и высоты элемента canvas.
Для рисования внутри элемента canvas, нужно использовать JavaScript. Сначала нужно найти созданный тег canvas с помощью функции getElementById(), а потом инициализировать нужный контекст. Как только это будет сделано, можно начинать рисование на канве, используя доступные API-команды выбранного контекста.
Следующий скрипт рисует простой прямоугольник на указанной канве:
// при возникновении ошибки выведем сообщение.
try{
// Получить контекст
var canvas = document.getElementById('Example1');
// Получить 2D контекст.
// ! Можете инициализировать только один контекст для каждого элемента.
var ctx = canvas.getContext('2d');
// Рисуем прямоугольник, с левым-верхним углом (10,50) и нижним-правым (50,40).
ctx.fillRect(10, 20, 50, 40);
}
catch(err){
alert('Ошибка');
}
РезультатОбновите браузер. | Должно выглядеть так |
Создание канвы на JavaScript.
Для создания канвы используются стандартные функция JavaScript createElement():
// при возникновении ошибки выведем сообщение.
try{
// Получить контекст
var canvas = document.getElementById('Example2');
// Получить 2D контекст.
// ! Можете инициализировать только один контекст для каждого элемента.
var ctx = canvas.getContext('2d');
// Рисуем прямоугольник, с левым-верхним углом (20,20) и нижним-правым (50,50).
ctx.fillRect(20, 20, 50, 50);
}
catch(err){
alert('Ошибка');
}
РезультатОбновите браузер. | Должно выглядеть так |
Задания
- Создайте с помощью элемента canvas шахматное поле размером (160х160 точек)
↑ HTML5 Canvas | ||||
Урок - Основы использования Canvas | ||||
Текущий урок - первый. |
Следующий урок → Урок - Линии и дуги, кривые Бернштейна-Безье
|