Méthode Canvas quadraticCurveTo()
Définition et utilisation
quadraticCurveTo() Méthode pour ajouter un point au chemin actuel en utilisant les points de contrôle spécifiés pour la courbe quadratique Bézier.
Astuce :Une courbe quadratique Bézier nécessite deux points. Le premier point est le point de contrôle utilisé pour le calcul quadratique Bézier, et le second 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 : quadraticCurveTo(
20,100,200,20) - Point d'arrivée : quadraticCurveTo(20,100,
200,20)
Astuce :Voir également Méthode bezierCurveTo(). Elle a deux points de contrôle, pas un seul.
Exemple
Tracez une courbe quadratique 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();
Syntaxe
context.quadraticCurveTo(cpx,cpy,x,y);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| cpx | L'abscisse du point de contrôle de Bézier. |
| cpy | L'ordonnée y du point de contrôle de Bézier. |
| x | L'abscisse 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 versions antérieures ne prennent pas en charge l'élément <canvas>.
