Metoden arc

Metoden arc ritar en båge med centrum vid en given punkt med en given radie. Bågen blir synlig först när metoderna stroke eller fill tillämpas. I det första fallet blir det en kontur, och i det andra - en fylld figur.

Den sista valfria parametern styr ritriktningen. Den tar ett värde true eller false. Värdet true ritar bågen medurs, medan värdet false - moturs (standard).

Du kan ange start- och slutvinkel när du ritar. Dessa vinklar mäts i radianer, inte i grader. För att omvandla grader till radianer kan du använda följande funktion:

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

Syntax

kontext.arc(x, y, radie, startvinkel, slutvinkel, [riktning = false]);

Exempel

Låt oss rita en cirkelbåge:

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

Exempel

Låt oss rita en halv cirkelbåge:

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

Exempel

Låt oss rita en halv cirkel (fyll konturen 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 även

metoden rect,
som ritar en rektangel