HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
После рисования прямой линии перо будет установлено в ее конечной точке. Мы можем прямо из этой точки начать рисование следующей линии контура.
Листинг 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. С
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;