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:

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

Szintaxis

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

Példa

Rajzoljunk egy kört:

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

javascriptlet 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:

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

javascriptlet 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):

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

javascriptlet 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