Méthode arc

La méthode arc dessine un arc avec un centre à un point donné, un rayon donné. Cet arc deviendra visible seulement si vous appliquez les méthodes stroke ou fill. Dans le premier cas, ce sera un contour, et dans le second - une forme.

Le dernier paramètre optionnel régule la direction du dessin. Il prend la valeur true ou false. La valeur true dessine l'arc dans le sens des aiguilles d'une montre, et la valeur false - dans le sens inverse des aiguilles d'une montre (par défaut).

Vous pouvez définir les angles de début et de fin lors du dessin. Ces angles sont mesurés en radians, non en degrés. Pour convertir les degrés en radians, vous pouvez utiliser la fonction suivante :

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

Syntaxe

contexte.arc(x, y, rayon, angle de départ, angle de fin, [sens = false]);

Exemple

Dessinons une circonférence :

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

Exemple

Dessinons une demi-circonférence :

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

Exemple

Dessinons un demi-cercle (remplissons le contour avec 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;
}

Voir aussi

la méthode rect,
qui dessine un rectangle