Exemple
Dessiner une courbe de 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(); Essayez - le vous - même » support du navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari soutiennent le bezierCurveTo() méthode.
Remarque: Internet Explorer 8 et les versions antérieures, ne supportent pas le <canvas> élément.
Définition et utilisation
Le bezierCurveTo() méthode ajoute un point au chemin courant en utilisant les points de contrôle spécifiques qui représentent une courbe de Bézier cubique.
Une courbe de Bézier cubique nécessite trois points. Les deux premiers points sont des points de contrôle qui sont utilisés dans le calcul de Bézier cubique et le dernier point est le point de la courbe de fin. Le point de départ de la courbe est le dernier point dans le chemin actuel. Si un chemin n'existe pas, utilisez les beginPath() et moveTo() méthodes pour définir un point de départ.
Astuce: Consultez la quadraticCurveTo() méthode.Il a un point au lieu de deux de contrôle.
| Syntaxe JavaScript: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| cp1x | La coordonnée x du premier point de contrôle de Bézier | Joue-le " |
| cp1y | La coordonnée y du premier point de contrôle de Bézier | Joue-le " |
| cp2x | La coordonnée x du second point de contrôle de Bézier | Joue-le " |
| cp2y | La coordonnée y du second point de contrôle de Bézier | Joue-le " |
| x | La coordonnée x du point de fin | Joue-le " |
| y | La coordonnée y du point de fin | Joue-le " |