Méthode Canvas bezierCurveTo()
Définition et utilisation
bezierCurveTo() Méthode pour ajouter un point au chemin actuel en utilisant les points de contrôle spécifiés pour la courbe Bézier cubique.
Astuce :Une courbe Bézier cubique nécessite trois points. Les deux premiers points sont utilisés comme points de contrôle dans le calcul Bézier cubique, et le troisième point est le point d'arrivée de la courbe. Le point de départ de la courbe est le dernier point du chemin actuel. Si le chemin n'existe pas, utilisez beginPath() et moveTo() Méthode pour définir le point de départ.
- Point de départ : moveTo(
20,20) - Point de contrôle 1 : bezierCurveTo(
20,100,200,100,200,20) - Point de contrôle 2 : bezierCurveTo(20,100,
200,100,200,20) - Point d'arrivée : bezierCurveTo(20,100,200,100,
200,20)
Astuce :Voir Méthode quadraticCurveTo(). Il a un point de contrôle, pas deux.
Exemple
Tracez une courbe Bézier cubique :
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Syntaxe
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| cp1x | L'abscisse x du premier point de contrôle Bézier. |
| cp1y | L'ordonnée y du premier point de contrôle Bézier. |
| cp2x | L'abscisse x du deuxième point de contrôle Bézier. |
| cp2y | L'ordonnée y du deuxième point de contrôle Bézier. |
| x | L'abscisse x de l'extrémité. |
| y | L'ordonnée y de l'extrémité. |
Support du navigateur
Les nombres dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
