Metoden arc

Metoden arc tegner en bue med centrum i et givet punkt med en given radius. Denne bue bliver kun synlig, hvis metoderne stroke eller fill anvendes. I det første tilfælde vil der være en omrids, og i det andet - en udfyldt form.

Den sidste valgfrie parameter styrer tegneretningen. Den accepterer en værdi på true eller false. Værdien true tegner buen med uret, og værdien false - mod uret (standard).

Du kan angive start- og slutvinkler, når du tegner. Disse vinkler måles i radianer, ikke i grader. For at konvertere grader til radianer kan du bruge følgende funktion:

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

Syntaks

kontekst.arc(x, y, radius, startvinkel, slutvinkel, [retning = false]);

Eksempel

Lad os tegne en cirkel:

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

Eksempel

Lad os tegne en halv cirkel:

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

Eksempel

Lad os tegne en halv cirkel (udfyld omridset med 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;
}

Se også

metoden rect,
som tegner et rektangel