Manuel de référence HTML

Le répertoire complet des balises HTML

Méthode arc() de HTML canvas

arc() est une méthode de Canvas 2La méthode arc() de l'API Canvas permet de dessiner un arc. Le centre de l'arc est à la position (x, y), le rayon est r, et il est dessiné dans le sens indiqué par anticlockwise (par défaut, dans le sens horaire) à partir de l'angle de départ startAngle jusqu'à l'angle de fin endAngle.

Manuel de référence pour HTML canvas

Exemple en ligne

Tracez un cercle :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Utilisation de la méthode arc() de HTML canvas-Tutoriel de base(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　l'attribut canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

Voyons si nous pouvons le tester ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9et Firefox, Opera, Chrome et Safari prennent en charge arc() Méthode.

Attention :Internet Explorer 8 Les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode arc() crée un arc/Courbe (utilisée pour créer un cercle ou une partie d'un cercle).

Avis :Pour créer un cercle à l'aide de arc(), effectuez les opérations suivantes : réglez l'angle de début à 0, réglez l'angle de fin à2 * Math.PI.

Avis :Utilisez stroke() oufill() Cette méthode dessine effectivement un arc sur le canevas.

Centre :

arc(100,75,50,0*Math.PI,1.5*Math.PI)

Angle de début :

arc(100,75,50,0,1.5*Math.PI)

Angle de fin :

arc(100,75,50,0*Math.PI,1.5*Math.PI)

Syntaxe JavaScript :	context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Valeur du paramètre

Paramètres	Description
x	Coordonnée x du centre du cercle.
y	Coordonnée y du centre du cercle.
r	Rayon du cercle.
sAngle	Angle de début, en radians (la position circulaire de 3 heures du cercle est de 0 degrés).
eAngle	Angle de fin, en radians.
counterclockwise	Optionnel. Détermine si le dessin doit être effectué dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre. False = dans le sens des aiguilles d'une montre, true = dans le sens inverse des aiguilles d'une montre.

Manuel de référence pour HTML canvas

HTML: <template> balise