Рисование кривых Безье
Для построения квадратичной и кубической кривых используются соответственно функции: · quadraticCurveTo (Px, Py, x, y) · bezierCurveTo (P1x, P1y, P2x, P2y, x, y) x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубической кривой соответственно две дополнительные точки. Следующий пример продемонстрирует отрисовку обеих кривых: function createImage() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(10, 15); ctx.bezierCurveTo(75, 55, 175, 20, 250, 15); ctx.moveTo(10, 15); ctx.quadraticCurveTo(100, 100, 250, 15); ctx.stroke(); } Результат можно увидеть в браузере:
|
