Ник Морган - JavaScript для детей. Самоучитель по программированию

...хотя я уверен, что вы найдете цвета поинтереснее, чем красный, зеленый

и синий!

Рисование контуров прямоугольников

Как видите, метод fi llRect рисует заполненные прямоугольники.

Хорошо, если именно это вам и нужно, но порой может понадобиться

изобразить лишь контур прямоугольника, так, будто он обведен ручкой

или карандашом. Для этого предназначен метод strokeRect. Например,

Stroke — здесь

если запустить следующий код, на экране появится контур небольшого

«контур»

прямоугольника, такой как на рис. 13.4:

13. Элемент canvas 197

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.strokeRect(10, 10, 100, 20);

Рис. 13.4. Контур прямоугольника, нарисованный с помощью strokeRect

Метод strokeRect принимает те же аргументы, что и fi llRect:

это x - и y -координаты верхнего левого угла, а затем ширина и высота

прямоугольника. В данном случае прямоугольник изображен с отсту-

пом в 10 пикселей от левого верхнего угла «холста», ширина его равна

100 пикселям, а высота 20 пикселям.

Изменить цвет контура можно с помощью свойства strokeStyle,

Line width —

а чтобы задать толщину линии, нужно свойство lineWidth. Например:

толщина

линии

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

 ctx.strokeStyle = "DeepPink";

 ctx.lineWidth = 4;

ctx.strokeRect(10, 10, 100, 20);

Здесь в строке  мы задали цвет линии DeepPink (насыщенный

розовый), а в строке  установили ширину линии 4 пикселя. Результат

изображен на рис. 13.5.

Рис. 13.5. Розовый контур прямоугольника с шириной линии 4 пикселя

Рисование линий или путей

Путем называют последовательность линий на «холсте». Чтобы изобра-

зить путь на элементе canvas, нужно задать x - и y -координаты начала

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

198 Часть III. Графика

комбинации начальных и конечных координат, можно рисовать разные

фигуры. Например, вот как изобразить бирюзовый крестик, показанный

на рис. 13.6:

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

 ctx.strokeStyle = "Turquoise";

 ctx.lineWidth = 4;

Begin path —

 ctx.beginPath();

начать путь

 ctx.moveTo(10, 10);

Line to —

 ctx.lineTo(60, 60);

провести

 ctx.moveTo(60, 10);

линию к

 ctx.lineTo(10, 60);

 ctx.stroke();

Рис. 13.6. Бирюзовый крестик, нарисованный командами moveTo и lineTo

В строках  и  мы задали цвет линии и ее толщину. В строке 

мы вызываем для контекста рисования (который хранится в ctx)

метод beginPath, который определяет начало рисования нового пути.

В строке  вызов метода moveTo c двумя аргументами — координатами

x и y — приводит к тому, что наше виртуальное JavaScript-перо отры-

вается от «холста» и, не оставляя за собой следа, перемещается в точку

с этими координатами.

Чтобы нарисовать линию, мы вызываем в строке 

метод lineTo с координатами x и y . В результате вирту-

альное перо опускается на «холст» и, двигаясь к заданным

координатам, чертит за собой линию. В данном случае

мы рисуем линию из точки (10, 10) в точку (60, 60) — это

диагональ, идущая от верхнего левого угла «холста»

к его нижнему правому углу, которая является первой

линией нашего крестика.

В строке  мы опять вызываем moveTo, устанавливая

новую позицию для рисования, и в строке  вызываем

lineTo, чтобы прочертить линию из (60, 10) в (10, 60). Эта

диагональная линия, идущая из верхнего правого угла

«холста» в нижний левый угол, довершает наш крестик.

13. Элемент canvas 199

Однако это еще не конец! Мы лишь описали то, что собираемся нари-

совать, а «холст» по-прежнему пуст. Поэтому в строке  мы вызываем

метод stroke, благодаря чему линии наконец-то появляются на экране.

ПОПР ОБУ ЙТЕ !

Попробуйте нарисовать этого веселого человечка при помощи

методов beginPath, moveTo, lineTo и stroke. Изобразить

голову (это квадрат 20 × 20 пикселей с шириной линии

4 пикселя) можно, воспользовавшись методом strokeRect.

Заливка путей цветом

Мы уже знакомы с методом для рисования прямоугольных контуров

strokeRect, методом fi llRect для рисования заполненных цветом пря-

моугольников, а также методом stroke для обводки путей. Эквивалентом

Fill —

fi llRect для путей является метод fi ll. Если вам нужно заполнить замкну-

заполнить

тый путь цветом, а не просто обвести его, используйте fi ll вместо stroke.

Например, следующий код рисует домик синего цвета, как на рис. 13.7.

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "Blue";

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 60);

ctx.lineTo(130, 30);

ctx.lineTo(160, 60);

ctx.lineTo(160, 100);

ctx.lineTo(100, 100);

 ctx.fill();

Рис. 13.7. Синий домик, залитый цветом с помощью метода fi ll