CanvasRenderingContext2D.bezierCurveTo()

CanvasRenderingContext2D.bezierCurveTo() - малює криву лінію Безьє.

Синтаксис:

ctx.bezierCurveTo( cp1x, cp1y, cp2x, cp2y, х, у );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

cp1x - ось х координати для першої контрольної точки.

cp1y - ось у координати для першої контрольної точки.

cp2x - ось х координати для другої контрольної точки.

cp2y - ось у координати для другої контрольної точки.

x - осі х координати кінцевої точки.

y - ось у координати кінцевої точки.

Опис:

bezierCurveTo() метод об'єкту CanvasRenderingContext2D який додає лінійну криву Безьє до полотна canvas.

Щоб задати початкову точку використовуйте метод moveTo().

Приклад:

Ваш браузер не підтримує canvas. <canvas id="canvas" width="250" height="250"></canvas> var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.moveTo(0,0); crt.bezierCurveTo(10, 10, 55, 50, 90, 10); //задаємо контури кривої лінії Безьє crt.strokeStyle="#a800ff"; crt.stroke(); //малюємо криву лінію Замальовуємо криву лінію Безьє: var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.beginPath(); //створюємо новий контур crt.bezierCurveTo(70, 70, 150, 175, 120, 70); crt.closePath(); //закриваємо контур crt.fillStyle="#3300f9"; crt.fill(); var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.beginPath(); crt.bezierCurveTo(10, 100, 95, 80, 120, 180); crt.closePath(); crt.strokeStyle="#a800ff"; crt.stroke();