Méthode arcTo()
Exemple
Créez un arc entre deux tangentes sur le canevas :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Démarrer un chemin
ctx.beginPath();
ctx.moveTo(20, 20);
// Créer une ligne horizontale
ctx.lineTo(100, 20);
// Créer un arc
ctx.arcTo(150, 20, 150, 70, 50);
// Créer une ligne verticale
ctx.lineTo(150, 120);
// Dessiner le chemin
ctx.stroke(); Plus d'exemples ci-dessous.
Description
La méthode arcTo() ajoute un arc ou une courbe entre deux tangentes au chemin.
Utilisez la méthode stroke() ou fill() pour dessiner le chemin.
Voir aussi :
La méthode beginPath() (Démarrer un nouveau chemin)
La méthode closePath() (Fermer le chemin actuel)
La méthode moveTo() (Déplacer le chemin vers un point)
La méthode lineTo() (Ajouter une ligne au chemin)
La méthode fill() (Remplir le chemin actuel)
La méthode stroke() (Dessiner le chemin actuel)
La méthode arc() (Ajouter un cercle au chemin)
La méthode bezierCurveTo() (Ajouter une courbe au chemin)
La méthode quadraticCurveTo() (Ajouter une courbe au chemin)
Syntaxe
| context .arcTo( x1, y1, x2, y2, r ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| x1 | La coordonnée x du début de l'arc | |
| y1 | La coordonnée y du début de l'arc | |
| x2 | La coordonnée x de la fin de l'arc | |
| y2 | La coordonnée y de la fin de l'arc | |
| r | Le rayon de l'arc |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Créez un arc entre deux tangentes et remplissez-le :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Démarrer un chemin
ctx.beginPath();
ctx.moveTo(20, 20);
// Créer une ligne horizontale
ctx.lineTo(100, 20);
// Créer un arc
ctx.arcTo(150, 20, 150, 70, 50);
// Créer une ligne verticale
ctx.lineTo(150, 120);
// Remplir et dessiner le chemin
ctx.fill(); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
arcTo() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |