De methode arc

De methode arc tekent een boog met een middelpunt op een gegeven punt, met een gegeven straal. Deze boog wordt alleen zichtbaar als je de methoden stroke of fill toepast. In het eerste geval krijg je een omtrek, en in het tweede - een gevulde vorm.

De laatste optionele parameter regelt de tekenrichting. Het accepteert een waarde van true of false. De waarde true tekent de boog met de klok mee, en de waarde false - tegen de klok in (standaard).

Je kunt een begin- en eindhoek opgeven bij het tekenen. Deze hoeken worden gemeten in radialen, niet in graden. Om graden om te zetten in radialen kun je de volgende functie gebruiken:

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

Syntaxis

javascriptcontext.arc(x, y, straal, starthoek, eindhoek, [richting = false]);

Voorbeeld

Laten we een cirkelboog tekenen:

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

Результат:

Voorbeeld

Laten we een halve cirkelboog tekenen:

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

Результат:

Voorbeeld

Laten we een halve cirkel tekenen (we vullen de omtrek op met 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;
}

Результат:

Zie ook