Exemple
Dessiner une courbe de Bézier quadratique:
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 - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le quadraticCurveTo() 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 quadratique.
Une courbe de Bézier quadratique nécessite deux points. Le premier point est un point qui est utilisé dans le calcul de Bézier quadratique et le deuxième point est le point de la courbe de fin de contrôle. 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 bezierCurveTo() méthode.Il dispose de deux points de contrôle au lieu d'un.
| Syntaxe JavaScript: | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
Paramètre valeurs
| 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 de fin | Joue-le " |
| y | La coordonnée y du point de fin | Joue-le " |