c() - Référence Web API | MDN

• Skip to main content
• Skip to search

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

CanvasRenderingContext2D.arc() Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

• Learn more
• See full compatibility
• Report feedback

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).

Dans cet article

• Syntaxe
• Exemples
• Spécifications
• Compatibilité des navigateurs
• Voir aussi

Syntaxe

jsvoid 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

html<canvas id="canvas"></canvas>

JavaScript

jsvar 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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 * Math.PI, false); ctx.stroke();</textarea > jsvar 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().

<canvas id="canvas" width="150" height="200"></canvas> jsvar 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# dom-context-2d-arc-dev

Compatibilité des navigateurs

Voir aussi

• L'Interface JavaScript à laquelle appartient la méthode : CanvasRenderingContext2D

Help improve MDN

Cette page vous a-t-elle été utile ? Yes No Learn how to contribute

Cette page a été modifiée le 3 août 2023 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content Filter sidebar

1. CanvasRenderingContext2D
2. Propriétés d'instance
   1. canvas
   2. direction
   3. fillStyle
   4. filter
   5. font
   6. fontKerning
   7. fontStretch
   8. fontVariantCaps
   9. globalAlpha
   10. globalCompositeOperation
   11. imageSmoothingEnabled
   12. imageSmoothingQuality
   13. lang Expérimental
   14. letterSpacing
   15. lineCap
   16. lineDashOffset
   17. lineJoin
   18. lineWidth
   19. miterLimit
   20. shadowBlur
   21. shadowColor
   22. shadowOffsetX
   23. shadowOffsetY
   24. strokeStyle
   25. textAlign
   26. textBaseline
   27. textRendering
   28. wordSpacing
3. Méthodes d'instance
   1. arc()
   2. arcTo()
   3. beginPath()
   4. bezierCurveTo()
   5. clearRect()
   6. clip()
   7. closePath()
   8. createConicGradient()
   9. createImageData()
   10. createLinearGradient()
   11. createPattern()
   12. createRadialGradient()
   13. drawFocusIfNeeded()
   14. drawImage()
   15. ellipse()
   16. fill()
   17. fillRect()
   18. fillText()
   19. getContextAttributes()
   20. getImageData()
   21. getLineDash()
   22. getTransform()
   23. isContextLost()
   24. isPointInPath()
   25. isPointInStroke()
   26. lineTo()
   27. measureText()
   28. moveTo()
   29. putImageData()
   30. quadraticCurveTo()
   31. rect()
   32. reset()
   33. resetTransform()
   34. restore()
   35. rotate()
   36. roundRect()
   37. save()
   38. scale()
   39. setLineDash()
   40. setTransform()
   41. stroke()
   42. strokeRect()
   43. strokeText()
   44. transform()
   45. translate()