HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Вот теперь, вооружившись контекстом рисования канвы, мы можем начать рисовать на ней с помощью весьма многочисленных свойств и методов объекта 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 (полностью непрозрачный).