Méthode : CanvasRenderingContext2D.arc()

Dessine un arc de cercle centré sur (x,y), de rayon r entre 2 angles

Syntaxe
myContext.arc(x, y, rayon, angle1, angle2);

Compatible tous navigateurs

Oui

Description
Dessine un arc de cercle centré sur (x,y), de rayon r entre l'angle angle1 et l'angle angle2 exprimés en radian dans le sens des aiguilles d'une montre.

L'arc apparaît une fois l'appel à stroke().

Exemple 1 : Affichage du sens des angles

Code source

<canvas id="myCanvas" width="350" height="300" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

/* Tracé du centre */
myContext.lineWidth="1";
myContext.beginPath();
myContext.moveTo(0,150);
myContext.lineTo(300,150);
myContext.stroke();
myContext.beginPath();
myContext.moveTo(150,0);
myContext.lineTo(150,300);
myContext.stroke();

myContext.lineWidth="2";
myContext.font="bold 15px arial";

/* Cercle complet bleu */
myContext.beginPath();
myContext.strokeStyle="#316AC5";
myContext.fillStyle=myContext.strokeStyle;
myContext.arc(150, 150, 130, 0 , 2*Math.PI);
myContext.stroke();
myContext.fillText("0 = 2PI", 150+130+4, 150-3);

/* Ajout de la flèche de sens avec un peu de trigonométrie */
myContext.beginPath();
myContext.moveTo(150+130*Math.cos(Math.PI/4)+10, 150+130*Math.sin(Math.PI/4));
myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))
myContext.moveTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4)-10);
myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))
myContext.stroke();

/* Arc de cercle rouge entre 0 et PI/2 */
myContext.beginPath();
myContext.strokeStyle="#ff0000";
myContext.fillStyle=myContext.strokeStyle;
myContext.arc(150, 150, 110, 0 , Math.PI/2);
myContext.stroke();
myContext.fillText("PI/2", 150+110*Math.cos(Math.PI/2)-30, 150+110*Math.sin(Math.PI/2)+5);

/* Arc de cercle orange entre PI/8 et 3PI/2 */
myContext.beginPath();
myContext.strokeStyle="#FFA500";
myContext.fillStyle=myContext.strokeStyle;
myContext.arc(150, 150, 90, Math.PI/8, 3*Math.PI/2);
myContext.stroke();
myContext.fillText("3.PI/2", 150+90*Math.cos(3*Math.PI/2)+10, 150+90*Math.sin(3*Math.PI/2)-3);
myContext.fillText("PI/8", 150+90*Math.cos(Math.PI/8)-10, 150+90*Math.sin(Math.PI/8)-3);

/* Arc de cercle vert entre 3PI/4 et 5PI/4 */
myContext.beginPath();
myContext.strokeStyle="#00aa00";
myContext.fillStyle=myContext.strokeStyle;
myContext.arc(150, 150, 70, 3*Math.PI/4 , 5*Math.PI/4);
myContext.stroke();
myContext.fillText("3.PI/4", 150+70*Math.cos(3*Math.PI/4)+5, 150+70*Math.sin(3*Math.PI/4)+3);
myContext.fillText("5.PI/4", 150+70*Math.cos(5*Math.PI/4)-10, 150+70*Math.sin(5*Math.PI/4)-3);

</script>

Résultat

Emulation de la console

Explication

Affichage du sens de rotation et de quelques angles particuliers pour bien comprendre le fonctionnement.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 21/09/2017

QUERY 10

SELECT *, DATE_FORMAT(dt_insert, '%d/%m/%Y %H:%i' ) AS jour_insert, DATE_FORMAT(dt_maj, '%d/%m/%Y %H:%i' ) AS jour_maj FROM js_reference ORDER BY IDfather, name

SELECT * FROM js_navigateur ORDER BY ordre

SELECT * FROM js_version ORDER BY ID

SELECT * FROM js_reference WHERE phpfile="canvasrenderingcontext2d.arc"

UPDATE js_reference SET nb_visi=nb_visi+1, nb_visi_delai=nb_visi_delai+1 WHERE ID='322'

SELECT * FROM js_navigateur ORDER BY ordre

SELECT js_equivalent_ressource.*, js_equivalent_language.language, js_equivalent_language.favico FROM js_equivalent_ressource, js_equivalent_language WHERE js_equivalent_ressource.idLanguage = js_equivalent_language.id AND js_equivalent_ressource.etat=1 AND js_equivalent_language.etat=1 AND js_equivalent_ressource.typeof='REF' AND js_equivalent_ressource.idRessource="322"

SELECT * FROM js_exemple WHERE ID='322' ORDER BY ordre

SELECT * FROM js_url WHERE ID='322' ORDER BY ordre

SELECT * FROM js_url WHERE ID='308' ORDER BY ordre

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets Javascript

Chargement
en cours...

Méthode : CanvasRenderingContext2D.arc()

Dessine un arc de cercle centré sur (x,y), de rayon r entre 2 angles

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets Javascript