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:

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

Syntaxis

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

Voorbeeld

Laten we een cirkelboog tekenen:

<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

Laten we een halve cirkelboog tekenen:

<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

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

Zie ook

methode rect,
die een rechthoek tekent