CanvasRenderingContext2D.bezierCurveTo()

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

Синтаксис:

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

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

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

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

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

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

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

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

Опис:

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

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

Приклад:

<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();