Exemple
Dessiner une courbe Bézier:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le quadraticCurveTo() méthode ajoute un point de la trajectoire en cours en utilisant les points de contrôle spécifiques qui représentent une courbe de Bézier quadratique.
Une courbe Bézier nécessite deux points. Le premier point est un point de contrôle qui est utilisé dans le calcul de Bézier quadratique et le deuxième point est le point de fin de la courbe. Le point de départ de la courbe est le dernier point dans le trajet de courant. Si un chemin n'existe pas, utilisez les beginPath() et moveTo() méthodes pour définir un point de départ.
Tip: Vérifiez la bezierCurveTo() méthode. Il dispose de deux points de contrôle au lieu d'un.
| syntaxe JavaScript: | context . quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
Les valeurs des paramètres
| Paramètre | La description | Joue-le |
|---|---|---|
| cpx | La coordonnée x du point de contrôle de Bézier | Joue-le " |
| cpy | La coordonnée y du point de contrôle de Bézier | Joue-le " |
| x | La coordonnée x du point d'arrivée | Joue-le " |
| y | La coordonnée y du point de fin | Joue-le " |