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

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