Az arc metódus

Az arc metódus egy ívet rajzol egy megadott középponttal és sugárral. Az ív csak akkor válik láthatóvá, ha alkalmazzuk a stroke vagy a fill metódust. Az első esetben a kontúrt, a második esetben pedig a kitöltött alakzatot kapjuk.

Az utolsó, opcionális paraméter szabályozza a rajzolás irányát. Az true vagy false értéket veheti fel. Az true érték az óramutató járása szerinti irányban rajzolja az ívet, míg az false érték az óramutató járásával ellentétes irányban (alapértelmezés).

Megadhatunk kezdő és záró szöget a rajzoláshoz. Ezeket a szögeket radiánban mérjük, nem fokban. A fokok radiánná alakításához használhatja a következő függvényt:

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Szintaxis

kontextus.arc(x, y, sugár, kezdőszög, zárószög, [irány = false]);

Példa

Rajzoljunk egy kört:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Példa

Rajzoljunk egy félkört:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Példa

Rajzoljunk egy félkört (töltsük ki a kontúrt a fill metódussal):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Lásd még

a rect metódus,
amely téglalapot rajzol