Metoden arc

Metoden arc tegner en bue med sentrum i et gitt punkt, med en gitt radius. Denne buen blir bare synlig hvis du bruker metodene stroke eller fill. I det første tilfellet vil det være en kontur, og i det andre - en figur.

Den siste valgfrie parameteren regulerer tegneretningen. Den tar en verdi true eller false. Verdien true tegner buen med klokken, og verdien false - mot klokken (som standard).

Du kan angi start- og sluttvinkler når du tegner. Disse vinklene måles i radianer, ikke i grader. For å konvertere grader til radianer kan du bruke følgende funksjon:

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

Syntaks

javascriptkontekst.arc(x, y, radius, startvinkel, sluttvinkel, [retning = false]);

Eksempel

La oss tegne en sirkel:

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;
}

Результат:

Eksempel

La oss tegne en halv sirkel:

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;
}

Результат:

Eksempel

La oss tegne en halv sirkel (fylle konturen med fill):

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;
}

Результат:

Se også