Тег CANVAS: рисование на веб-странице (ч.1)

Продолжаем знакомство с возможностями новой версии языка HTML под номером 5, поддерживаемой Internet Explorer 9 и другими современными веб-браузерами. На этот раз мы поговорим о новых графических возможностях HTML 5. Они включают тег <CANVAS> и средства для программного рисования прямо на веб-странице. Мы, как веб-дизайнеры, давно об этом мечтали...


1. Прошлое и настоящее веб-графики
Начнём с того, что совершим небольшой экскурс в историю веб-графики, рассмотрим, что нам предлагала предыдущая версия HTML - 4.01, и выясним, что стоит ждать от HTML 5.

1.1. Прошлое Web-графики
Вообще, поддержка размещения на веб-страницах изображений появилась в HTML достаточно давно, ещё в самых первых версиях этого языка. И оно понятно - зачастую простая картинка может дать больше информации, чем многие килобайты текста.

Так что же HTML 4.01 даёт нам в плане поддержки графики? Прежде всего, это, конечно, хорошо нам знакомый тег <IMG>. C его помощью мы можем поместить на веб-страницу изображение, хранящееся в стороннем файле. Этот тег поддерживает графические файлы форматов GIF, JPEG, PNG и BMP (только в Internet Explorer).

<IMG SRC="image.jpg">

Достоинство у тега <IMG> одно - простота. В самом деле, мы можем поместить на веб-страницу изображение, просто вставив в нужное место её HTML-кода один простой тег. Недостатка же у него три:

• Изображение хранится в отдельном файле, что иногда может быть критично.
• Поддерживаются только три формата графических файлов (BMP в расчёт не принимаем, так как он поддерживается только в Internet Explorer и в реальности никогда не используется).
• Графика, помещаемая на веб-страницу с помощью тега <IMG>, статична - мы не можем нарисовать на уже готовом изображении что-то ещё.

Впоследствии в HTML появились новые средства, позволяющие преодолеть ограничения тега <IMG>. Это теги <EMBED> и <OBJECT>, позволяющие поместить на веб-страницу данные практически любого формата и задействовать для их обработки и собственно вывода на экран дополнительные программы, работающие совместно с веб-браузером, - модули расширения и элементы ActiveX.

<OBJECT TYPE="application/x-shockwave-flash" DATA="image.swf" WIDTH="400" HEIGHT="300">

  <PARAM NAME="quality" VALUE="high">

  <PARAM NAME="wmode" VALUE="opaque">

  <PARAM NAME="swfversion" VALUE="6.0.65.0">

  <PARAM NAME="expressinstall" VALUE="Scripts/expressInstall.swf">

</OBJECT>

Этот HTML-код помещает на веб-страницу элемент ActiveX, реализующий функциональность проигрывателя Flash, и открывает в нём изображение из файла image.swf.

Достоинства такого подхода перечислены ниже.

• Мы можем вывести на Web-страницу графические данные практически любого формата: Adobe PDF, Adobe Shockwave/Flash и др. Единственное требование - в системе должен быть установлен модуль расширения или элемент ActiveX, поддерживающий данный формат данных.
• Некоторые модели расширения и элементы ActiveX позволяют программно, из веб-сценариев, рисовать на уже помещённом на веб-страницу изображении. Так, проигрыватель Flash предоставляет возможность программно нарисовать на изображении всё что угодно и даже создать любое изображение "с нуля".

Недостатков у этого подхода, к сожалению, больше...

• HTML-код, помещающий на веб-страницу модуль расширения или элемент ActiveX, крайне громоздок.
• Изображение, опять же, хранится в отдельном файле.
• Модуль расширения или элемент ActiveX, поддерживающий выводимые нами на веб-страницу графические данные, должен быть установлен на компьютере посетителя. Иначе посетитель попросту ничего не увидит.
• Различные веб-браузеры поддерживают дополнительные программы по-разному. Так, элементы ActiveX поддерживаются только Internet Explorer.

Идеальным был бы подход, позволяющий и выводить на веб-страницу изображения, хранящиеся в отдельных файлах, и создавать графику программно, и при этом использовать только средства, встроенные в сам веб-браузер, без привлечения сторонних программ. Существует ли решение, воплощающее его?..

1.2. Что предлагает HTML 5
Теперь, с появлением веб-браузеров, поддерживающих HTML 5, существует!

• Для помещения на веб-страницу графики используется один простой тег.
• Мы можем выводить на веб-страницу графику, хранящуюся в сторонних файлах.
• Мы можем создавать графику программно, из веб-сценариев.
• Нам не нужны никакие дополнительные программы - всё, что нам нужно, реализует сам веб-браузер.

Однако средства HTML 5 по выводу графики имеют один весьма существенный недостаток - вся без исключения графика формируется программно, с помощью веб-сценариев. Так что если нам потребуется просто вывести на веб-страницу изображение, хранящееся в файле, лучше просто использовать давно знакомый и привычный нам тег <IMG>.


2. Подготовительные действия
Прежде чем создавать веб-страницы, использующие возможности вывода графики HTML 5, ознакомимся с параграфами 2.2 и 3.2 статьи, посвящённой тегам <AUDIO> и <VIDEO>. Описанные там вещи обязан принять во внимание любой веб-программист, который планирует вплотную заняться HTML 5.


3. Канва. Тег <CANVAS>
Первое, что нам нужно узнать, - вывод графики средствами HTML 5 выполняется на строго определённом месте веб-страницы. Это место называется канвой, или холстом. Вне канвы вывод графики невозможен.

Канва создаётся на веб-странице с помощью парного тега <CANVAS>.

<CANVAS ID="can1"></CANVAS>

Канве обязательно следует дать имя. Для этого, как мы уже знаем, применяется атрибут ID, поддерживаемый практически всеми тегами. В качестве значения этого атрибута как раз и указывается имя канвы.

Тег <CANVAS> поддерживает два очень полезных атрибута:

• HEIGHT - указывает высоту канвы в пикселах. Если не указан, высота канвы будет равна 150 пикселам.
• WIDTH - указывает ширину канвы в пикселах. Если не указан, высота канвы будет равна 300 пикселам.

<CANVAS ID="can1" WIDTH="400" HEIGHT="300"></CANVAS>

Примечание:
Задавать ширину и высоту канвы с помощью CSS не рекомендуется.

Канва представляется в веб-сценариях как экземпляр объекта HTMLCanvasElement.


4. Контекст рисования
Как мы уже знаем, абсолютно вся графика формируется на канве программно, из веб-сценариев. То есть мы создаём веб-сценарий, либо загрузочный, либо обработчик события load (завершение загрузки) веб-страницы, и в нём пишем выражения, которые и будут рисовать нужную нам картинку.

Для рисования прменяются специальные свойства и методы объекта... нет, не HTMLCanvasElement (который представляет канву), а CanvasRenderingContext2D. Данный объект представляет так называемый контекст рисования, который можно охарактеризовать как набор инструментов, с помощью которых мы и будем рисовать на канве.

Нам нужно получить экземпляр объекта CanvasRenderingContext2D, представляющий контекст рисования нашей канвы. Сделать это можно вызовом метода getContext объекта HTMLCanvasElement. В качестве единственного параметра он принимает строку "2d" и в качестве результата возвращает то, что нам нужно, - контекст рисования.

На заметку
Строка "2d", переданная в качестве параметра методу getContext, говорит о том, что данному методу следует вернуть двухмерный контекст рисования, предназначенный для создания двухмерной графики. Это единственная разновидность контекста рисования, поддерживаемая современными веб-браузерами. Возможно, в будущих веб-браузерах появится поддержка контекста трёхмерного рисования. Но это в будущем...

var oCan1 = document.getElementById("can1");

var ctx1 = oCan1.getContext("2d");

Этот веб-сценарий получает экземпляр объекта HTMLCanvasElement, представляющий канву can1, и помещает его в переменную oCan1. Далее он получает контекст рисования данной канвы - экземпляр объекта CanvasRenderingContext2D - и присваивает его переменной ctx1.

Теперь, получив контекст рисования, мы можем приступить к созданию графики.


5. Основные принципы рисования. Примитивы. Координаты
Но сначала рассмотрим один очень важный вопрос. Он касается принципов, по которым формируется рисуемая на канве HTML 5 графика.

• Графика на канве представляет собой набор отдельных геометрических фигур, или примитивов. К примитивам относятся прямоугольники, прямые и кривые линии, изображения, взятые из сторонних файлов, и др.
• Примитивы могут состоять из отдельных частей - сегментов.
• Чтобы нарисовать тот или иной примитив, нам потребуется указать координаты, по которым он будет располагаться на канве. Координаты эти отсчитываются от левого верхнего угла канвы; другими словами — в верхнем левом углу канвы находится начало ее системы координат.
• Все координаты задаются в виде чисел в пикселах.

6. Рисование прямоугольников
Проще всего нарисовать на канве прямоугольник, с заливкой или без. Чтобы нарисовать прямоугольник без заливки (то есть только контур прямоугольника), достаточно вызвать метод strokeRect объекта CanvasRenderingContext2D. Формат его вызова приведён ниже.

контекст рисования.strokeRect(

  горизонтальная координата,

  вертикальная координата,

  ширина,

  высота

);

ртикальная координата,
ширина,
высота
);[/code]
Первые два параметра задают, соответственно, горизонтальную и вертикальную координаты верхнего левого угла рисуемого прямоугольника, а третий и четвёртый - его ширину и высоту. Результата этот метод не возвращает.

[code]ctx1.strokeRect(20, 20, 360, 260);[/code]
Нарисовать прямоугольник с заливкой можно с помощью метода fillRect объекта CanvasRenderingContext2D. Вот формат его вызова:

[code]контекст рисования.fillRect(
горизонтальная координата,
вертикальная координата,
ширина,
высота
);[/code]
Этот метод принимает те же параметры, что и метод strokeRect, и также не возвращает результата.

[code]ctx1.fillRect(100, 100, 200, 100);[/code]

7. Очистка прямоугольной области
Канва HTML 5 предоставляет весьма полезную возможность очистки прямоугольной области от любой присутствующей на ней графики. Для этого используется метод clearRect объекта CanvasRenderingContext2D, формат вызова которого приведён ниже.

[code]контекст рисования.clearRect(
горизонтальная координата,
вертикальная координата,
ширина,
высота
);[/code]
Этот метод принимает те же параметры, что и методы strokeRect и fillRect, и не возвращает результата.

[code]ctx1.clearRect(100, 100, 50, 50);[/code]
Это выражение очищает от графики фрагмент канвы.

[code]ctx1.clearRect(0, 0, 400, 300);[/code]
А это выражение очистит от графики всю нашу канву.


Дополнительные материалы

• Описание тега <CANVAS> на Web-сайте MSDN.
• Описание тега <CANVAS> на Web-сайте W3C.
• Описание атрибута ID на Web-сайте MSDN.
• Описание метода getElementById на Web-сайте MSDN.
• Описание метода getContext объекта HTMLCanvasElement на Web-сайте MSDN.
• Описание объекта CanvasRenderingContext2D на Web-сайте W3C.
  
  
  Продолжение следует...
  
  
  
  dronov_va, TheVista.Ru Team
  Февраль 2011