Metode arc

Die metode arc teken 'n boog met 'n middelpunt by 'n gegewe punt, met 'n gegewe radius. Hierdie boog sal slegs sigbaar word as die metodes stroke of fill toegepas word. In die eerste geval sal daar 'n buitelyn wees, en in die tweede geval - 'n gevulde vorm.

Die laaste opsionele parameter reguleer die rigting van teken. Dit neem die waarde true of false aan. Die waarde true teken die boog kloksgewys, en die waarde false - teenkloksgewys (standaard).

Jy kan die begin- en eindhoeke spesifiseer tydens teken. Hierdie hoeke word gemeet in radiale, nie in grade nie. Om grade na radiale om te skakel kan jy die volgende funksie gebruik:

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

Sintaksis

javascriptkonteks.arc(x, y, radius, begin hoek, eind hoek, [rigting = false]);

Voorbeeld

Kom ons teken 'n omtrek:

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

Kom ons teken 'n halfomtrek:

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

Kom ons teken 'n halwe sirkel (ons vul die buitelyn 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;
}

Результат:

Sien ook