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

CanvasRenderingContext2D.arc()

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

arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

Przykłady:

window.onload = () => {
 
 const szer = 600;
 const wys = 300;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(50, 50, 50, 0, 2 * Math.PI);
 ctx.stroke();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(155, 50, 50, 0, Math.PI + (Math.PI * 1) / 2, 1 % 2 === 1);
 ctx.stroke();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(260, 50, 50, 0, Math.PI + (Math.PI * 1) / 2, 2 % 2 === 1);
 ctx.stroke();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(365, 50, 50, 0, Math.PI + (Math.PI * 0) / 2, 3 % 2 === 1);
 ctx.stroke();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(50, 250, 50, 0, 2 * Math.PI);
 ctx.fill();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(155, 250, 50, 0, Math.PI + (Math.PI * 1) / 2, 1 % 2 === 1);
 ctx.fill();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(260, 250, 50, 0, Math.PI + (Math.PI * 1) / 2, 2 % 2 === 1);
 ctx.fill();
 
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.beginPath();
 ctx.arc(365, 250, 50, 0, Math.PI + (Math.PI * 0) / 2, 3 % 2 === 1);
 ctx.fill();

 };

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

Opis:
Metoda CanvasRenderingContext2D.arc() dodaje łuk kołowy do bieżącej ścieżki podrzędnej. Metoda arc() tworzy łuk kołowy o środku (x, y) i promieniu radius. Ścieżka zaczyna się w startAngle, kończy w endAnglei biegnie w kierunku określonym przez counterclockwise domyślnie zgodnie z ruchem wskazówek zegara. Parametry x - pozioma współrzędna środka łuku, y - współrzędna pionowa środka łuku, radius - promień łuku. Musi być pozytywny, startAngle - kąt, pod którym rozpoczyna się łuk, w radianach, mierzony od dodatniej osi x, endAngle - kąt, pod którym kończy się łuk, wyrażony w radianach, mierzony od dodatniej osi x, counterclockwise - opcjonalny, opcjonalna wartość logiczna. Jeśli true, rysuje łuk w kierunku przeciwnym do ruchu wskazówek zegara pomiędzy kątem początkowym i końcowym. Wartość domyślna to false, zgodnie z ruchem wskazówek zegara.

Zobacz też: