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

Автор: Topol Воскресенье, Май 6th, 2012 Нет комментариев

Рубрика: Операционные системы

Продолжаем знакомство с возможностями новой версии языка 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(
горизонтальная координата,
вертикальная координата,
ширина,
высота
);

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

Код:
ctx1.strokeRect(20, 20, 360, 260);

Нарисовать прямоугольник с заливкой можно с помощью метода fillRect объекта CanvasRenderingContext2D. Вот формат его вызова:

Код:
контекст рисования.fillRect(
горизонтальная координата,
вертикальная координата,
ширина,
высота
);

Этот метод принимает те же параметры, что и метод strokeRect, и также не возвращает результата.

Код:
ctx1.fillRect(100, 100, 200, 100);

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

Код:
контекст рисования.clearRect(
горизонтальная координата,
вертикальная координата,
ширина,
высота
);

Этот метод принимает те же параметры, что и методы strokeRect и fillRect, и не возвращает результата.

Код:
ctx1.clearRect(100, 100, 50, 50);

Это выражение очищает от графики фрагмент канвы.

Код:
ctx1.clearRect(0, 0, 400, 300);

А это выражение очистит от графики всю нашу канву.

Продолжение следует…

Источник: thevista.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты