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