Путь может состоять из кривых. Их рисовать посложнее, нежели прямые.
Метод >quadraticCurveTo
рисует кривую до нужной точки. Для определения кривизны методу даётся контрольная точка вместе с точкой назначения. Представьте, что контрольная точка как бы притягивает линию, задавая кривой кривизну. Линия не проходит через контрольную точку. Вместо этого направления линии в её начальной и конечной точках будут стремиться к контрольной точке. Следующий пример иллюстрирует это:
>
>
> var cx = document.querySelector("canvas").getContext("2d");
> cx.beginPath();
> cx.moveTo(10, 90);
> // control=(60,10) goal=(90,90)
> cx.quadraticCurveTo(60, 10, 90, 90);
> cx.lineTo(60, 10);
> cx.closePath();
> cx.stroke();
>
Рисуем слева направо квадратичную кривую, у которой контрольная точка задана как (60,10), а затем рисуем два сегмента, проходящие обратно через контрольную точку и начало линии. Результат напоминает эмблему Звёздного пути. Можно увидеть действие контрольной точки: линия, выходящая из начальной и конечной точек, начинается по направлению к контрольной точке, а затем загибается.
Метод >bezierCurve
рисует схожую кривую. Вместо одной контрольной точки у неё есть две – по одной на каждый из концов кривой. Вот похожий рисунок для иллюстрации поведения такой кривой:
>
>
> var cx = document.querySelector("canvas").getContext("2d");
> cx.beginPath();
> cx.moveTo(10, 90);
> // control1=(10,10) control2=(90,10) goal=(50,90)
> cx.bezierCurveTo(10, 10, 90, 10, 50, 90);
> cx.lineTo(90, 10);
> cx.lineTo(10, 10);
> cx.closePath();
> cx.stroke();
>
Две контрольные точки задают направления обоих концов кривой. Чем они дальше от начала или конца, тем сильнее кривая будет выпучиваться в их направлении.
С этими кривыми сложновато работать – не всегда понятно, как искать контрольные точки, которые приведут к нужной вам форме. Иногда их можно вычислить, иногда приходится подбирать методом проб и ошибок.
Дуги, фрагменты кругов, легче в обращении. Метод >arcTo
принимает целых пять аргументов. Первые четыре – похожи на аргументы >quadraticCurveTo
. Первая пара задаёт что-то вроде контрольной точки, вторая – место назначения кривой. Пятый задаёт радиус дуги. Метод создаёт скруглённый угол – линию, идущую к контрольной точке, а затем к точке назначения – и скругляет угол заданным радиусом. Метод >arcTo