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

CanvasRenderingContext2D.ellipse()

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

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)

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

 ctx.beginPath();
 ctx.ellipse(200, 200, 80, 200, Math.PI / 4, 0, 2 * Math.PI, false);
 ctx.stroke();

 ctx.beginPath();
 ctx.setLineDash([8, 8]);
 ctx.moveTo(0, 400);
 ctx.lineTo(400, 0);
 ctx.stroke();

 ctx.fillStyle = "yellow";
 ctx.beginPath();
 ctx.ellipse(100, 400, 50, 30, Math.PI * 1, 0, Math.PI * 2, false);
 ctx.fill();

 ctx.fillStyle = "orange";
 ctx.beginPath();
 ctx.ellipse(250, 400, 50, 30, Math.PI * 1, 0, Math.PI, false);
 ctx.fill();

 ctx.fillStyle = "green";
 ctx.beginPath();
 ctx.ellipse(300, 300, 50, 30, Math.PI * 1, 0, Math.PI, true);
 ctx.fill();

 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.ellipse() dodaje łuk eliptyczny do bieżącej ścieżki podrzędnej. Metoda ellipse() tworzy łuk eliptyczny o środku (x, y) z promieniami radiusX i radiusY. Ścieżka zaczyna się startAngle i kończy w endAngle i biegnie w kierunku określonym przez counterclockwise, domyślnie zgodnie z ruchem wskazówek zegara. Parametry x - współrzędna osi x pozioma środka elipsy, y - współrzędna osi Y pionowa środka elipsy, radiusX - promień głównej osi elipsy, musi być nieujemny, radiusY - promień małej osi elipsy, musi być nieujemny, rotation - obrót elipsy wyrażony w radianach, startAngle - kąt mimośrodu, pod którym zaczyna się elipsa, mierzony zgodnie z ruchem wskazówek zegara od dodatniej osi x i wyrażony w radianach, endAngle - kąt mimośrodu, pod którym kończy się elipsa, mierzony zgodnie z ruchem wskazówek zegara od dodatniej osi x i wyrażony w radianach, counterclockwise - opcjonalny, wartość logiczna, która, jeśli true, rysuje elipsę w kierunku przeciwnym do ruchu wskazówek zegara, wartość domyślna to false, zgodnie z ruchem wskazówek zegara.

Zobacz też: