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:

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

Sintaksis

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

Voorbeeld

Kom ons teken 'n omtrek:

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

Voorbeeld

Kom ons teken 'n halfomtrek:

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

Voorbeeld

Kom ons teken 'n halwe sirkel (ons vul die buitelyn met fill):

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

Sien ook

die metode rect,
wat 'n reghoek teken