CanvasRenderingContext2D.arc()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La méthode CanvasRenderingContext2D.arc()
de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).
Syntaxe
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
Paramètres
x
-
La position en x du centre de l'arc.
y
-
La position en y du centre de l'arc.
radius
(rayon)-
Le rayon de l'arc.
startAngle
(angle départ)-
La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
endAngle
(angle fin)-
La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
anticlockwise
(sens anti-horaire) Facultatif-
Un
Booléen
facultatif qui, si àtrue
(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
Exemples
En utilisant la méthode arc
Voici un code simple permettant de dessiner un cercle .
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :
Code jouable
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function () {
textarea.focus();
});
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
Exemple avec différentes formes
Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc()
.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// Draw shapes
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var anticlockwise = i % 2 == 1; // Draw anticlockwise
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-arc-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'Interface JavaScript à laquelle appartient la méthode :
CanvasRenderingContext2D