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 :

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

Syntaxe

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

Exemple

Dessinons une circonférence :

html<canvas id="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();

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

Результат:

Exemple

Dessinons une demi-circonférence :

html<canvas id="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();

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

Результат:

Exemple

Dessinons un demi-cercle (remplissons le contour avec fill) :

html<canvas id="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();

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

Результат:

Voir aussi