Урок - Основы использования Canvas

Главная » Курсы » Курс HTML5 Canvas » Урок - Основы использования Canvas

Обучающий онлайн курс
HTML5 Canvas

Лицензия: Копирование запрещено.
↑ 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  
Текущий урок - первый.   Следующий урок →
Урок - Линии и дуги, кривые Бернштейна-Безье