Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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

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

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

Пример:

ctxCanvas.moveTo(200, 150);

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

Прямые линии

Прямые линии рисовать проще всего. Для этого используется метод 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, чтобы закончить рисование треугольника без заливки.

Дуги

Дуги рисуются тоже довольно просто. Для этого используется метод arc:

<контекст рисования>.arc(<горизонтальная координата>,<вертикальная координата>, <радиус>, <начальный угол>, <конечный угол>,true|false)

Первые два параметра задают горизонтальную и вертикальную координаты центра рисуемой дуги в виде числа в пикселах. Третий параметр определяет радиус дуги, также в пикселах и в виде числа. Четвертый и пятый параметры задают начальный и конечный углы дуги в радианах в виде чисел; эти углы отсчитываются от горизонтальной оси. Если шестой параметр имеет значение true, то дуга рисуется против часовой стрелки, а если false — по часовой стрелке. Метод arc не возвращает результата.

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

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

radians = (Math.PI / 180) * degrees;

Здесь переменная degrees хранит значение угла в градусах, а переменная radians будет хранить то же значение, но в радианах. Свойство PI объекта JavaScript Math хранит значение числа π.

Вот Web-сценарий, который рисует окружность без заливки:

ctxCanvas.beginPath();

ctxCanvas.arc(200, 150, 100, 0, Math.PI * 2, false);

ctxCanvas.stroke();

Отметим, какие параметры метода arc, в частности, значения начального и конечного угла, мы задавали в этом случае.

Кривые Безье

Кривые Безье — это линии особой формы, описываемые тремя или четырьмя точками: начальной, конечной и одной или двумя контрольными. Начальная и конечная точки, как и в случае прямой линии, задают начало и конец кривой Безье, а контрольные точки формируют касательные, определяющие форму этой кривой.

Рис. 22.1. Кривая Безье с двумя контрольными точками

Рис. 22.2. Кривая Безье с одной контрольной точкой

На рис. 22.1 кривая Безье выделена утолщенной линией, ее начальная и конечная точки обозначены кружками, квадратики соответствуют контрольным точкам. Через каждую контрольную точку, а также через начальную и конечную точки кривой Безье проведены касательные (тонкие прямые линии) — они определяют форму кривой. Если мы мысленно переместим какую-либо из контрольных точек, то направление проведенной через нее касательной изменится, и, следовательно, изменится и форма кривой Безье.

На рис. 22.1 представлена кривая Безье с двумя контрольными точками. Такие кривые применяются чаще всего.

Но зачастую предпочтительнее использовать другую, "вырожденную", форму кривых Безье — с одной контрольной точкой (рис. 22.2). На основе кривых Безье с одной контрольной точкой можно создавать дуги и рисовать секторы, в чем мы вскоре убедимся.

Для рисования кривых Безье с двумя контрольными точками предусмотрен метод

bezierCurveTo: <контекст рисования>.bezierCurveTo(<горизонтальная координата первой контрольной точки>,<вертикальная координата первой контрольной точки>,<горизонтальная координата второй контрольной точки>,<вертикальная координата второй контрольной точки>,<горизонтальная координата конечной точки>,<вертикальная координата конечной точки>)

Назначение параметров этого метода понятно из их описания. Все они задаются в пикселах в виде чисел. Метод не возвращает результата.

Рисование кривой Безье начинается в той точке, где в данный момент установлено перо. После рисования кривой перо устанавливается в ее конечную точку.

Вот Web-сценарий, рисующий кривую Безье с двумя контрольными точками:

ctxCanvas.beginPath();

ctxCanvas.moveTo(100, 100);

ctxCanvas.bezierCurveTo(120, 80, 160, 20, 100, 200);

ctxCanvas.stroke();

Рисование кривых Безье с одной контрольной точкой реализует метод quadraticCurveTo:<контекст рисования>.quadraticCurveTo(<горизонтальная координата контрольной точки>,<вертикальная координата контрольной точки>,<горизонтальная координата конечной точки>,<вертикальная координата конечной точки>)

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

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

Вот Web-сценарий, рисующий кривую Безье с одной контрольной точкой:

ctxCanvas.beginPath();

ctxCanvas.moveTo(100, 100);

ctxCanvas.quadraticCurveTo(200, 100, 200, 200);

ctxCanvas.stroke();

Получившаяся кривая будет иметь вид дуги.

Более сложный пример иллюстрирует листинг 22.3.

Листинг 22.3

ctxCanvas.beginPath();

ctxCanvas.strokeStyle = "red";

ctxCanvas.fillStyle = "red";

ctxCanvas.moveTo(100, 100);

ctxCanvas.quadraticCurveTo(200, 100, 200, 200);

ctxCanvas.lineTo(100, 200);

ctxCanvas.lineTo(100, 100);

ctxCanvas.fill();

Web-сценарий из листинга 22.3 рисует красный сектор окружности с красной же заливкой. Мы проводим кривую Безье с одной контрольной точкой, имеющую вид дуги, и соединяем ее начальную и конечную точки с центром воображаемой окружности.

Еще один пример приведен в листинге 22.4.

Листинг 22.4

ctxCanvas.beginPath();

ctxCanvas.moveTo(20, 0);

ctxCanvas.lineTo(180, 0);

ctxCanvas.quadraticCurveTo(200, 0, 200, 20);

ctxCanvas.lineTo(200, 80);

ctxCanvas.quadraticCurveTo(200, 100, 180, 100);

ctxCanvas.lineTo(20, 100);

ctxCanvas.quadraticCurveTo(0, 100, 0, 80);

ctxCanvas.lineTo(0, 20);

ctxCanvas.quadraticCurveTo(0, 0, 20, 0);

ctxCanvas.stroke();

Web-сценарий из листинга 22.4 рисует прямоугольник со скругленными углами.

Попробуйте сами с ним разобраться.

Прямоугольники

Мы уже умеем рисовать прямоугольники, используя описанные ранее методы strokeRect и fillRect. Но прямоугольники, рисуемые этими методами, представляют собой независимые фигуры, не являющиеся частью какого-либо сложного контура. Если мы хотим нарисовать прямоугольник в составе сложного контура, нам придется прибегнуть к методу rect:

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

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