Méthode bezierCurveTo() du canvas HTML
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éziers cubique.
Avis :Pour tracer une courbe béziers cubique, il faut trois points. Les deux premiers points sont utilisés comme points de contrôle dans le calcul des courbes béziers, et le troisiè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 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 final : bezierCurveTo(20,100,200,100,
200,20)
Avis :Voir également Méthode quadraticCurveTo()。Elle a un point de contrôle, pas deux.
Exemple
Tracez une courbe béziers 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 | Coordonnée x du premier point de contrôle de Bezier. |
| cp1y | Coordonnée y du premier point de contrôle de Bezier. |
| cp2x | Coordonnée x du second point de contrôle de Bezier. |
| cp2y | Coordonnée y du second point de contrôle de Bezier. |
| x | Coordonnée x de l'extrémité finale. |
| y | Coordonnée y de l'extrémité finale. |
Support du navigateur
Les numéros 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 :Les versions d'Internet Explorer 8 et antérieures ne prennent pas en charge l'élément <canvas>.
