Dessiner un arc dans Canvas avec arcTo

L'arc-boutant a la forme donnée par arcTo

La méthode arcTo définit un arc dans le prolongement d'une ligne droite ou d'une autre figure.

La différence avec la méthode arc est que le point de départ et d'arrivée ne sont pas définis par un angle mais par des coordonnées.

En fait le tracé de arcTo n'a rien d'intuitif, les points de coordonnées sont des directions plutôt que des emplacements exacts, et une même figure peut être obtenue avec des coordonnées différentes quand au point d'arrivée. La figure ci-dessus permettra peut-être de mieux appréhender ce fonctionnement.

arcTo a pour arguments deux coordonnées et un rayon

La méthode a pour arguments deux paires de coordonnées, x1,y1 et x2,y2 plus un rayon.

arcTo(x1, y1, x2, y2, rayon)  

Mais elle dépend aussi d'un autre point x0, y0.

Ces coordonnées sont celles du dernier point de la figure tracée antérieurement ou c'est les coordonnées d'un point donné par la méthode lineTo appelée avant arcTo.

On utilise donc arcTo avec deux méthodes:

lineTo(x0, y0);
arcTo(x1, y1, x2, y2, rayon)  

ou avec toute autre figure:

rect(x, y, largeur, hauteur)  
arcTo(x1, y1, x2, y2, rayon)

Comprendre la méthode arcTo

Exemple:

Exemple annoté:

Code source de la démonstration:

<canvas id="canvasTo" width="400" height="400" style="border:1px dotted gray">
</canvas>
<script>
function setArcTo()
{
var canvas = document.getElementById("canvasTo");
var context = canvas.getContext("2d");
context.beginPath();
context.lineWidth="3";
context.strokeStyle="green";
context.moveTo(20, 20);
context.arcTo(380, 20, 380, 380, 50);
context.stroke();
context.beginPath();
context.lineWidth="1";
context.strokeStyle="lightGray";
context.rect(20, 20, 360, 360);
context.stroke()
}
setArcTo();
</script>

Le rectangle grisé sert seulement à délimiter la figure.

Voir aussi