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

CanvasRenderingContext2D.quadraticCurveTo()

[_] [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]

quadraticCurveTo(cpx, cpy, x, y)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d", { willReadFrequently: true, colorSpace: "display-p3" });

 ctx.beginPath();
 ctx.moveTo(25, 20);
 ctx.quadraticCurveTo(250, 125, 25, 250);
 ctx.stroke();

 ctx.beginPath();
 ctx.moveTo(25, 250);
 ctx.quadraticCurveTo(250, 125, 250, 300);
 ctx.stroke();

 ctx.fillStyle = "black";
 ctx.beginPath();
 ctx.arc(25, 20, 4, 0, 2 * Math.PI);
 ctx.arc(25, 250, 4, 0, 2 * Math.PI);
 ctx.fill();

 ctx.beginPath();
 ctx.arc(250, 300, 4, 0, 2 * Math.PI);
 ctx.fill();

 ctx.fillStyle = "red";
 ctx.beginPath();
 ctx.arc(250, 125, 4, 0, 2 * Math.PI);
 ctx.fill();

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Metoda CanvasRenderingContext2D.quadraticCurveTo() dodaje kwadratową krzywą Béziera do bieżącej ścieżki podrzędnej. Wymaga dwóch punktów pierwszy to punkt kontrolny, a drugi to punkt końcowy. Punktem początkowym jest ostatni punkt aktualnej ścieżki, który można zmienić za pomocą moveTo() przed utworzeniem kwadratowej krzywej Béziera. Parametry cpx - współrzędna osi x punktu kontrolnego, cpy - współrzędna osi Y punktu kontrolnego, x - współrzędna osi x punktu końcowego, y - współrzędna osi Y punktu końcowego. Wartość zwracana undefined..

Zobacz też:
canvas moveTo() - Rozpoczyna nową podścieżkę w punkcie x, y