CanvasRenderingContext2D.bezierCurveTo()

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode moveTo() avant de créer une courbe de Bézier.

Syntaxe

void contexte2D.bezierCurveTo(pointContrôle1X, pointContrôle1Y, pointContrôle2X, pointContrôle2Y, pointArrivéeX, pointArrivéeY);

Paramètres

pointContrôle1X
La coordonnée en x du premier point de contrôle.
pointContrôle1Y
La coordonnée en y du premier point de contrôle.
pointContrôle2X
La coordonnée en x du second point de contrôle.
pointContrôle2Y
La coordonnée en y du second point de contrôle.
pointArrivéeX
La coordonnée en x du point d'arrivée.
pointArrivéeY
La coordonnée en y du point d'arrivée.

Exemples

Comment bezierCurveTo fonctionne

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

HTML

<canvas id="canvas"></canvas>

JavaScript

// Définit le canevas et son contexte 2D
const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

// Define the points as {x, y}
let pDépart    = { x: 50,  y: 20  };
let pContrôle1 = { x: 230, y: 30  };
let pContrôle2 = { x: 150, y: 80  };
let pArrivée   = { x: 250, y: 100 };

// Courbe cubique de Bézier
contexte2D.beginPath();
contexte2D.moveTo(start.x, start.y);
contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
contexte2D.stroke();

// Points de départ et d'arrivée
contexte2D.fillStyle = 'blue';
contexte2D.beginPath();
contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
contexte2D.fill();

// Points de contrôle
contexte2D.fillStyle = 'red';
contexte2D.beginPath();
contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
contexte2D.fill();

Résultat

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

Une simple courbe cubique de Bézier

Cet exemple dessine une simple courbe cubique de Bézier en utilisant bezierCurveTo().

HTML

<canvas id="canvas"></canvas>

JavaScript

La courbe débute au point spécifiée par moveTo(): (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

const canevas = document.getElementById("canvas");
const contexte2D = canevas.getContext("2d");

contexte2D.beginPath();
contexte2D.moveTo(30, 30);
contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
contexte2D.stroke();

Résultat

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'CanvasRenderingContext2D.beziercurveto' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : JNa0
Dernière mise à jour par : JNa0,