Канва также поддерживает рисование более сложных, чем прямоугольники, фигур с контурами из множества прямых и кривых линий. Сейчас мы выясним, как это делается, и рассмотрим соответствующие методы объекта CanvasRenderingContext2D.
Контуры сложных фигур рисуются в три этапа.
1. Web-обозреватель ставится в известность, что сейчас начнется рисование контура сложной фигуры.
2. Рисуются отдельные линии, прямые и кривые, составляющие сложный контур.
3. Web-обозреватель ставится в известность, что рисование контура закончено, и теперь фигура должна быть выведена на канву, возможно, с созданием заливки.
Также можно указать Web-обозревателю, что следует замкнуть нарисованный контур.
Рисование сложного контура начинается с вызова метода beginPath, который не принимает параметров и не возвращает результата.
Собственно рисование линий, составляющих сложный контур, выполняют особые методы, которые мы далее рассмотрим.
После окончания рисования сложного контура мы можем захотеть, чтобы Web-обозреватель его замкнул. Это реализует метод closePath, который не принимает параметров и не возвращает результата. После его вызова последняя точка контура будет соединена с самой первой, в которой началось его рисование.
Завершает рисование контура вызов одного из двух методов: stroke или fill. Первый метод просто завершает рисование контура, второй, помимо этого, замыкает контур, если он не замкнут, и рисует заливку получившейся фигуры. Оба метода не принимают параметров и не возвращают результата.
А теперь рассмотрим методы, которые используются для рисования разнообразных линий, составляющих сложный контур.
Для рисования сложного контура используется концепция пера — воображаемого инструмента рисования. Перо можно перемещать в любую точку на канве. Рисование каждой линии контура начинается в точке, где в данный момент находится перо. После рисования каждой линии перо перемещается в ее конечную точку, из которой тут же можно начать рисование следующей линии контура.
Изначально, сразу после загрузки 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 не возвращает результата.
После рисования прямоугольника методом rect перо устанавливается в точку с координатами [0,0], т. е. в верхний левый угол канвы.
Web-сценарий из листинга 22.5 рисует сложную фигуру, состоящую их трех накладывающихся друг на друга квадратов, и создает для нее заливку.
Листинг 22.5
ctxCanvas.beginPath();
ctxCanvas.rect(50, 50, 50, 50);
ctxCanvas.rect(75, 75, 50, 50);
ctxCanvas.rect(100, 100, 50, 50);
ctxCanvas.fill();
Канва позволяет задать стиль линий, включающий в себя некоторые параметры, которые управляют формой их начальных и конечных точек и точек соединения линий друг с другом. Давайте их рассмотрим.
Свойство lineCap задает форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:
— "butt" — начальная и конечная точки как таковые отсутствуют (значение по умолчанию);
— "round" — начальная и конечная точки имеют вид кружков;
— "square" — начальная и конечная точки имеют вид квадратиков.
Web-сценарий из листинга 22.6 рисует толстую прямую линию, начальная и конечная точки которой имеют вид кружков.
Листинг 22.6
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineCap = "round";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(180, 20);
ctxCanvas.stroke();
Свойство lineJoin задает форму точек соединения линий друг с другом. Его значение может быть одной из следующих строк:
— "miter" — точки соединения имеют вид острого или тупого угла (значение по умолчанию);
— "round" — точки соединения, образующие острые углы, скругляются;
— "bevel" — острые углы, образуемые соединяющимися линиями, как бы срезаются.
Web-сценарий из листинга 22.7 рисует контур треугольника толстыми линиями, причем точки соединения этих линий, образующие острые углы, будут срезаться.
Листинг 22.7
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineJoin = "bevel";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Свойство miterLimit задает дистанцию, на которую могут выступать острые углы, образованные соединением линий, от точки соединения, когда для свойства lineJoin задано значение "miter". Углы, выступающие на бóльшую дистанцию, будут срезаны.
Значение данного свойства задается в пикселах в виде числа. Каково его значение по умолчанию, автору выяснить не удалось.
Листинг 22.8 содержит исправленный вариант Web-сценария, приведенного ранее.
Листинг 22.8
ctxCanvas.beginPath();
ctxCanvas.lineJoin = "miter";
ctxCanvas.lineWidth = 10;
ctxCanvas.miterLimit = 1;
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Дистанция, на которую могут выступать острые углы, образованные соединением линий контура, не должна превышать одного пиксела. Углы, выступающие на бóльшую дистанцию, будут срезаны.