HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

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, который не принимает параметров и не возвращает результата.

Собственно рисование линий, составляющих сложный контур, выполняют особые методы, которые мы далее рассмотрим.

После окончания рисования сложного контура мы можем захотеть, чтобы Web-обозреватель его замкнул. Это реализует метод closePath, который не принимает параметров и не возвращает результата. После его вызова последняя точка контура будет соединена с самой первой, в которой началось его рисование.

Завершает рисование контура вызов одного из двух методов: stroke или fill. Первый метод просто завершает рисование контура, второй, помимо этого, замыкает контур, если он не замкнут, и рисует заливку получившейся фигуры. Оба метода не принимают параметров и не возвращают результата.

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

Перо. Перемещение пера

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

Изначально, сразу после загрузки Web-страницы и вывода канвы, перо находится в точке с координатами [0,0], т. е. в верхнем левом углу канвы. Переместить перо в другую точку канвы, где мы собираемся начать рисование контура, позволяет метод moveTo:

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

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

Пример:

ctxCanvas.moveTo(200, 150);

Это выражение перемещает перо в центр канвы cnv — в точку с координатами [200,150].

Прямые линии

Прямые линии рисовать проще всего. Для этого используется метод lineTo:

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

Начальная точка рисуемой прямой будет находиться в том месте, где в данный момент установлено перо (об этом уже говорилось ранее). Координаты конечной точки в пикселах задают параметры метода lineTo. Метод не возвращает результата.