Méthode quadraticCurveTo()
Exemple
Dessinez une courbe de Bézier quadratique :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke(); Description
La méthode quadraticCurveTo() ajoute une courbe au chemin actuel en utilisant les points de contrôle qui représentent une courbe de Bézier quadratique.
Utilisez la méthode stroke() ou fill() pour dessiner le chemin.
Une courbe de Bézier quadratique nécessite deux points. Le premier point est un point de contrôle utilisé dans le calcul de Bézier quadratique, et le deuxième point est le point final de la courbe. Le point de départ de la courbe est le dernier point du chemin actuel. Si un chemin n'existe pas, utilisez les méthodes beginPath() et moveTo() pour définir un point de départ.
Remarque
La méthode bezierCurveTo() a deux points de contrôle au lieu d'un.
Voir aussi :
La méthode beginPath() (Commencer 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 arcTo() (Ajouter un cercle au chemin)
La méthode bezierCurveTo() (Ajouter une courbe au chemin)
Syntaxe
| context .quadraticCurveTo( cpx, cpy, x, y ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| cpx | La coordonnée x du point de contrôle de Bézier | |
| cpy | La coordonnée y du point de contrôle de Bézier | |
| x | La coordonnée x du point final | |
| y | La coordonnée y du point final |
Valeur de retour
| AUCUN |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
quadraticCurveTo() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |