Программируемая графика

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

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

Существует и другой путь – задействовать возможности программируемой графики, предлагаемые HTML 5. Они позволяют нарисовать любую, даже весьма сложную фигуру программно, из Web-сценария. Причем пользоваться этими возможностями не так и сложно — достаточно уяснить пару концепций и выучить несколько десятков методов.

Канва

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

Канву создают с помощью парного тега <CANVAS>:

<CANVAS ID="<имя>" [WIDTH="<ширина>"] [HEIGHT="<высота>"]></CANVAS>

Мы уже знаем, что рисование в канве выполняется программно, в Web-сценарии. А перед тем как что-то нарисовать, нам придется получить доступ к канве. Сделать это проще всего через имя, заданное атрибутом тега ID. Именно поэтому данный атрибут тега помечен здесь как обязательный.

Необязательные атрибуты тега WIDTH и HEIGHT задают, соответственно, ширину и высоту канвы в пикселах (по умолчанию 300×150 пикселов).

ВНИМАНИЕ!
Задавать размеры канвы с помощью стилей CSS не рекомендуется.

Вот HTML-код, создающий на странице канву cnv размером 400×300 пикселов:

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

Канва представляется как экземпляр объекта Web-обозревателя HTMLCanvasElement, производный от объекта HTMLElement. Для нас будет полезен только единственный метод этого объекта, который мы скоро рассмотрим.

Контекст рисования

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

Значит, перед тем как начать рисование, нам придется как-то получить экземпляр объекта Web-обозревателя CanvasRenderingContext2D для данной канвы. Это выполняется вызовом единственного метода getContext объекта HTMLCanvasElement:

<канва>.getContext("2d")

Мы видим, что метод getContext принимает единственный параметр — строку "2d". Возвращает он то, что нам нужно, – экземпляр объекта CanvasRenderingContext2D, представляющий контекст рисования данной канвы.

Напишем небольшой Web-сценарий, который помещает в переменную ctxCanvas контекст рисования для ранее созданной канвы cnv:

var htelCanvas = Ext.getDom("cnv");

var ctxCanvas = htelCanvas.getContext("2d");

Впоследствии мы будем пользоваться этим контекстом рисования для наших примеров.

Вот теперь, вооружившись контекстом рисования канвы, мы можем начать рисовать на ней с помощью весьма многочисленных свойств и методов объекта CanvasRenderingContext2D, которые мы обязательно рассмотрим.

ВНИМАНИЕ!
Все свойства и методы, рассматриваемые далее, принадлежат объекту CanvasRenderingContext2D, если об этом не сказано специально.

При выполнении операций рисования нам потребуется задавать координаты точек, в которых будет начинаться и заканчиваться рисование фигур и пр. Координаты измеряются в пикселах и отсчитываются от верхнего левого угла канвы; другими словами – в верхнем левом углу канвы находится начало ее координат. Запомним это.

Рисование простейших фигур

Начнем мы с самых простых операций – рисования различных прямоугольников, с заливкой и без нее.

Для рисования прямоугольника без заливки (т. е. одного лишь контура прямоугольника) предназначен метод strokeRect объекта CanvasRenderingContext2D:

<контекст рисования>.strokeRect(<горизонтальная координата>, <вертикальная координата>, <ширина>, <высота>)

Первые два параметра задают горизонтальную и вертикальную координаты верхнего левого угла рисуемого прямоугольника в пикселах в виде чисел. Третий и четвертый параметры задают, соответственно, ширину и высоту прямоугольника, также в пикселах и также в виде чисел. Метод strokeRect не возвращает результата.

Пример:

ctxCanvas.strokeRect(20, 20, 360, 260);

Метод fillRect рисует прямоугольник с заливкой:

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

Как видим, формат его вызова такой же, как у метода strokeRect:

ctxCanvas.fillRect(40, 40, 320, 220);

Весьма полезный для создания сложных фигур метод clearRect очищает заданную прямоугольную область от любой присутствовавшей там графики:

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

И его формат вызова схож с форматом вызова метода strokeRect.

Вот выражения, которые рисуют большой прямоугольник с заливкой, занимающий всю канву cnv, после чего создают в его середине прямоугольную "прореху":

ctxCanvas.fillRect(0, 0, 400, 300);

ctxCanvas.clearRect(100, 100, 200, 100);

А это выражение очищает канву от всей присутствующей на ней графики:

ctxCanvas.clearRect(0, 0, 400, 300);

Задание цвета, уровня прозрачности и толщины линий

Во время работы с канвой нам придется задавать цвета линий и заливок, уровень их прозрачности и толщину линий. Это выполняется с помощью особых свойств объекта CanvasRenderingContext2D.

Свойство strokeStyle задает цвет линий контура. Все фигуры, которые мы впоследствии нарисуем, будут иметь контур данного цвета. Цвет задают в виде строки либо с именем цвета, либо в привычном нам формате #RRGGBB, либо в двух других форматах, которые мы сейчас рассмотрим.

Вот первый формат:

rgb(<красная составляющая>, <зеленая составляющая>, <синяя составляющая>)

Здесь все три составляющие цвета имеют вид десятичных чисел от 0 до 255.

Второй формат позволяет дополнительно задать уровень прозрачности рисуемых линий:

rgba(<красная составляющая>, <зеленая составляющая>, <синяя составляющая>, <уровень прозрачности>)

Три составляющие цвета также представляют собой десятичные числа от 0 до 255. Уровень прозрачности задают в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Все четыре выражения задают непрозрачный красный цвет линий контура:

ctxCanvas.strokeStyle = "red";

ctxCanvas.strokeStyle = "#FF0000";

ctxCanvas.strokeStyle = "rgb(255, 0, 0)";

ctxCanvas.strokeStyle = "rgb(255, 0, 0, 1)";

А вот выражение, задающее для линий контура полупрозрачный черный цвет:

ctxCanvas.strokeStyle = "rgb(0, 0, 0, 0.5)";

Изначально, сразу после загрузки и вывода канвы на Web-страницу, линии контура будут иметь черный цвет.

Свойство fillStyle определяет цвет заливки, также в строковом виде и с использованием тех же форматов, что описаны ранее. Для цвета заливок действуют те же правила, что и для цвета линий. По умолчанию цвет заливок также черный.

Вот выражение, задающее тускло-зеленый непрозрачный цвет заливки:

ctxCanvas.fillStyle = "rgb(0, 127, 0)";

Еще один пример иллюстрирует листинг 22.1.

Программируемая графика

Web-сценарий из листинга 22.1 рисует прямоугольник с заливкой, используя и для контура, и для заливки непрозрачный красный цвет, после чего поверх него рисует прямоугольник с заливкой, но уже полупрозрачным зеленым цветом. При этом сквозь полупрозрачный второй прямоугольник будет просвечивать непрозрачный первый. Интересный эффект, кстати!

ВНИМАНИЕ!
Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот. Это вызовет ошибку в Web-сценарии.

Свойство lineWidth задает толщину линий в пикселах в виде числа.

Пример:

ctxCanvas.lineWidth = 20;

ctxCanvas.strokeRect(20, 20, 360, 260);

Этот Web-сценарий рисует прямоугольник без заливки линиями толщиной 20 пикселов.

Свойство globalAlpha, возможно, также нам пригодится. Оно позволяет задать уровень прозрачности для любой графики, которую мы впоследствии нарисуем. Уровень прозрачности также задается в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Вот выражение, задающее для всей графики, которую мы потом нарисуем на канве, уровень прозрачности 10%:

ctxCanvas.globalAlpha = 0.1;