Шрифт:
quadraticCurveTo
Этот метод похож на метод
bezierCurveTo,
но рисует квадратичные кривые Безье и имеет всего одну контрольную точку. С помощью этих методов можно рисовать контуры, подобные тем, что изображены на рис. 21.9.
В примере 21.7 представлен программный код, с помощью которого было создано изображение на рис. 21.9. Методы, используемые в этом примере, являются одними из самых сложных в прикладном интерфейсе объекта Canvas. Полное описание методов и их аргументов приводится в справочном разделе книги.
Пример 21.7. Добавление кривых в контур
// Вспомогательная функция для преобразования градусов в радианы
function rads(x) { return Math.PI*x/180; }
// Нарисовать окружность. Используйте масштабирование и вращение, если требуется
// получить эллипс. Здесь не используется текущая точка, поэтому окружность рисуется
// без прямой линии, соединяющей текущую точку с началом окружности,
с.beginPath;
с.агс(75,100,50, // Центр в точке (75,100), радиус 50
0,rads(360),false); // По часовой стрелке от 0 до 360 градусов
// Нарисовать сектор. Углы откладываются по часовой стрелке от положительной оси х.
// Обратите внимание, что метод агс добавляет линию от текущей точки к началу дуги.
c.moveTo(200, 100); // Перейти в центр окружности
с.агс(200, 100, 50, // Центр окружности и радиус
rads(-60), rads(0), // Начальный угол -60 градусов, конечный 0 градусов
false); // false означает по часовой стрелке
с.closePath; // Добавить прямую линю к центру окружности
// Тот же сектор, в противоположном направлении
c.moveTo(325, 100);
с.агс(325, 100, 50, rads(-60), rads(0), true); // Против часовой стрелки
c.closePath;
// Использовать агсТо для закругления углов. Здесь рисуется квадрат с верхним левым
// углом в точке (400,50), с закруглениями углов дугами с разными радиусами.
c.moveTo(450, 50); // Середина верхней стороны,
с.агсТо(500,50,500,150,30); // Насть верхней стороны и правый верхний угол,
с.агсТо(500,150,400,150,20); // Добавить правую сторону и правый нижний угол,
с.агсТо(400,150,400,50,10); // Добавить нижнюю сторону и левый нижний угол,
с.агсТо(400,50,500,50,0); // Добавить левую сторону и левый верхний угол,
с.closePath; // Замкнуть контур, чтобы добавить остаток верхней стороны.
// Квадратичная кривая Безье: одна контрольная точка
c.moveTo(75, 250); // Начало в точке (75,250)
с.quadraticCurveTo(100,200, 175, 250); // Соединить с точкой (175,250)
с.fillRect(100-3,200-3,6,6); // Метка контрольной точки (100,200)
// Кубическая кривая Безье
c.moveTo(200, 250); // Начало в точке (200,250)
с.bezierCurveTo(220,220,280,280,300,250); // Соединить с точкой (300,250)
с.fillRect(220-3,220-3,6,6); // Метки контрольных точек
с.fillRect(280-3.280-3,6,6);