Méthode HTML canvas quadraticCurveTo()
Exemple
Dessinez 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();
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la méthode.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Définition et utilisation
La méthode quadraticCurveTo() ajoute un point au chemin actuel en utilisant les points de contrôle spécifiés 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 de contrôle utilisé dans le calcul de Bézier quadratique 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 un chemin n'existe pas, utilisez les méthodes beginPath() et moveTo() pour définir un point de départ.
Astuce : Découvrez la méthode bezierCurveTo() . Il a deux points de contrôle au lieu d'un.
| Syntaxe JavaScript : | contexte .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
Valeurs des paramètres
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ Référence de canevas HTML