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
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode bezierCurveTo().
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 |
❮ Référence de canevas HTML