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

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

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

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

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

ctxCanvas.moveTo(200, 150);

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

Прямые линии

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

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

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

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

Задание 2: реализуйте пример из листинга 17.2.