Прямые линии

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

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

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

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

Листинг 22.2

ctxCanvas.beginPath();

ctxCanvas.moveTo(20, 20);

ctxCanvas.lineTo(380, 20);

ctxCanvas.lineTo(200, 280);

ctxCanvas.closePath();

ctxCanvas.stroke();

Web-сценарий из листинга 22.2 рисует треугольник без заливки. Давайте рассмотрим последовательность действий.

1. Вызовом метода beginPath сообщаем Web-обозревателю, что собираемся рисовать контур сложной фигуры.

2. Методом moveTo устанавливаем перо в точку, где начнется рисование.

3. С помощью метода lineTo рисуем две линии, которые станут сторонами треугольника.

4. Третью сторону мы рисовать не будем, а лучше вызовем метод closePath, чтобы Web-обозреватель сам нарисовал ее, замкнув нарисованный нами контур.

5. Вызываем метод stroke, чтобы закончить рисование треугольника без заливки.