Toile HTML méthode bezierCurveTo()
Exemple
Dessinez une courbe de Bézier cubique :
JavaScript :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 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 | |||||
---|---|---|---|---|---|
bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
La méthode bezierCurveTo() ajoute un point au chemin actuel en utilisant les points de contrôle spécifiés qui représentent une courbe de Bézier cubique.
Une courbe de Bézier cubique nécessite trois points. Les deux premiers points sont des points de contrôle utilisés dans le calcul de Bézier cubique et le dernier 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 quadraticCurveTo() . Il a un point de contrôle au lieu de deux.
Syntaxe JavaScript : | contexte .bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ); |
---|
Valeurs des paramètres
Parameter | Description | Play it |
---|---|---|
cp1x | The x-coordinate of the first Bézier control point | |
cp1y | The y-coordinate of the first Bézier control point | |
cp2x | The x-coordinate of the second Bézier control point | |
cp2y | The y-coordinate of the second Bézier control point | |
x | The x-coordinate of the ending point | |
y | The y-coordinate of the ending point |