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

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

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

Давайте так и сделаем. Ведь если мы взялись изучать HTML 5, так уж будем идти до конца.

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

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

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

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

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

Вот 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, которые мы обязательно рассмотрим.

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

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

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

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

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