Необязательные атрибуты тега 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.
Листинг 22.1
ctxCanvas.strokeStyle = "rgba(255, 0, 0, 1)";
ctxCanvas.fillStyle = "rgba(255, 0, 0, 1)";
ctxCanvas.fillRect(0, 100, 400, 100);
ctxCanvas.strokeStyle = "rgba(0, 255, 0, 0.5)";
ctxCanvas.fillStyle = "rgba(0, 255, 0, 0.5)";
ctxCanvas.fillRect(100, 0, 200, 300);
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;
Рисование сложных фигур
Канва также поддерживает рисование более сложных, чем прямоугольники, фигур с контурами из множества прямых и кривых линий. Сейчас мы выясним, как это делается, и рассмотрим соответствующие методы объекта CanvasRenderingContext2D.
Как рисуются сложные контуры
Контуры сложных фигур рисуются в три этапа.
1. Web-обозреватель ставится в известность, что сейчас начнется рисование контура сложной фигуры.
2. Рисуются отдельные линии, прямые и кривые, составляющие сложный контур.
3. Web-обозреватель ставится в известность, что рисование контура закончено, и теперь фигура должна быть выведена на канву, возможно, с созданием заливки.
Также можно указать Web-обозревателю, что следует замкнуть нарисованный контур.
Рисование сложного контура начинается с вызова метода beginPath, который не принимает параметров и не возвращает результата.
Собственно рисование линий, составляющих сложный контур, выполняют особые методы, которые мы далее рассмотрим.
После окончания рисования сложного контура мы можем
