Dessin de cercles via canvas en JavaScript
La méthode suivante arc dessine un arc avec
un centre en un point donné. Elle accepte les paramètres
suivants : x, y, le rayon r,
l'angle de départ startAngle, l'angle
de fin endAngle, le sens de dessin
direction (horaire ou antihoraire).
Le paramètre direction accepte les valeurs suivantes : true force
le dessin dans le sens horaire, false dans le sens antihoraire (par défaut).
Les angles dans la méthode arc sont mesurés en radians,
et non en degrés. Pour convertir des degrés en radians,
vous pouvez utiliser la fonction suivante :
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Dessinons un cercle
<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();
:
Dessinons un demi-cercle
<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();
:
Dessinons un demi-disque
<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(); // remplissons le contour
:
