[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.bezierCurveTo()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(50, 50);
 ctx.bezierCurveTo(230, 30, 150, 80, 250, 80);
 ctx.stroke();

 ctx.fillStyle = "blue";
 ctx.beginPath();
 ctx.arc(50, 50, 3, 0, 2 * Math.PI);
 ctx.arc(250, 80, 3, 0, 2 * Math.PI);
 ctx.fill();

 ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.arc(230, 30, 3, 0, 2 * Math.PI);
 ctx.arc(150, 80, 3, 0, 2 * Math.PI);
 ctx.fill();

 ctx.beginPath();
 ctx.moveTo(100, 200);
 ctx.bezierCurveTo(350, 10, 50, 350, 400, 400);
 ctx.stroke();

 ctx.fillStyle = "blue";
 ctx.beginPath();
 ctx.arc(100, 200, 3, 0, 2 * Math.PI);
 ctx.arc(400, 400, 3, 0, 2 * Math.PI);
 ctx.fill();

 ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.arc(350, 10, 3, 0, 2 * Math.PI);
 ctx.arc(50, 350, 3, 0, 2 * Math.PI);
 ctx.fill();

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas> 

Opis:
Metoda CanvasRenderingContext2D.bezierCurveTo() dodaje sześcienną krzywą Béziera do bieżącej ścieżki podrzędnej. Wymaga trzech punktów: dwa pierwsze to punkty kontrolne, a trzeci to punkt końcowy. Punktem początkowym jest ostatni punkt bieżącej ścieżki, który można zmienić za pomocą moveTo()przed utworzeniem krzywej Béziera. Parametry: cp1x - współrzędna osi x pierwszego punktu kontrolnego, cp1y - współrzędna osi Y pierwszego punktu kontrolnego, cp2x - współrzędna osi x drugiego punktu kontrolnego, cp2y - współrzędna osi Y drugiego punktu kontrolnego, x - współrzędna osi x punktu końcowego, y - współrzędna osi Y punktu końcowego.

Zobacz też: