HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
На этом мы закончим с поиском и обратим внимание на заголовок нашего Web-сайта. Как-то неказисто он выглядит — обычный текст без всяких изысков. И это в то время, когда большинство Web-сайтов щеголяют шикарными графическими логотипами. Почему у нас такого нет?
Потому что мы этим еще не занимались. Вообще, сделать графический логотип Web-сайта проще простого — достаточно нарисовать его в каком-либо графическом редакторе и сохранить в любом формате, применяемом в Интернете. А как поместить на Web-страницу графическое изображение, мы уже знаем — изучали еще в главе 4.
Существует и другой путь — задействовать возможности программируемой
Давайте так и сделаем. Ведь если мы взялись изучать HTML 5, так уж будем идти до конца.
Канва
Начнем сразу с первой концепции, на основе которой работает программируемая графика 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, либо в двух других форматах, которые мы сейчас рассмотрим.