Рисование прямоугольников
Для рисования прямоугольника без заливки (т. е. одного лишь контура прямоугольника) предназначен метод 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)";
Задание 1: реализуйте пример из листинга 17.1.
Листинг 17.1
Web-сценарий из листинга 17.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;