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 :

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

Dessinons un cercle

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат:

Dessinons un demi-cercle

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат:

Dessinons un demi-disque

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // remplissons le contour

Результат:

Problèmes pratiques