При создании приложении необходимо рисовать не только ломанные прямые но и кривые (квадратичные и Бизье). В Canvas это делается так:
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
Пример этого рисунка тут.
Отрисовки квадратичных кривых, как вы поняли, осуществляется при помощи метода quadraticCurveTo(). Рассмотрим его:
quadraticCurveTo(cp1x, cp1y, x, y)
x и y — координаты конца кривой
cp1x и cp1y — координаты контрольных точек (т.к. она одна это начало кривой).
Для отрисовки кривых Бизье применяется другой метод очень похожий на этот:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Тут больше контрольных точек. Поэтому появились параметры cp2x и сp2y. Это координаты второй контрольной точки.
Понять что такое контрольные точки поможет это изображение:
Вот пример применения:
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
Смотрим тут.
Принцип тот же, что и при создании ломаной, но кривая сглаживается.
