Méthode HTML 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 une courbe quadratique.
Astuce :Une courbe quadratique nécessite deux points. Le premier point est le point de contrôle utilisé pour le calcul quadratique, et le second 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 : quadraticCurveTo(
20,100,200,20) - Point final : quadraticCurveTo(20,100,
200,20)
Astuce :Voir Méthode bezierCurveTo()。Elle a deux points de contrôle, pas un.
Exemple
Tracez une courbe 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();
Syntaxe
context.quadraticCurveTo(cpx,cpy,x,y);
Valeur du paramètre
| Paramètres | Description |
|---|---|
| cpx | Coordonnée x du point de contrôle de Bézier. |
| cpy | Coordonnée y du point de contrôle de Bézier. |
| x | Coordonnée x de l'extrémité finale. |
| y | Coordonnée y de l'extrémité finale. |
Prise en charge 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 :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
