CanvasRenderingContext2D.bezierCurveTo()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
Paramètres
Exemples
Fonctionnement de bezierCurveTo()
Cet exemple montre comment une courbe cubique de Bézier est dessinée.
HTML
<canvas id="canvas"></canvas>
JavaScript
// Define canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Define the points as {x, y}
let debut = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let fin = { x: 250, y: 100 };
// Courbe de Bézier cubique
ctx.beginPath();
ctx.moveTo(debut.x, debut.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
ctx.stroke();
// Points de début et d'arrivée
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI); // Début
ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI); // Fin
ctx.fill();
// Points de contrôles
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Point de contrôle n°1
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Point de contrôle n°2
ctx.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 courbe cubique de Bézier simple
Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo()
.
HTML
<canvas id="canvas"></canvas>
JavaScript
La courbe débute au point spécifié 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 canvas = document.getElementById("canvas");
const contexte2D = canvas.getContext("2d");
contexte2D.beginPath();
contexte2D.moveTo(30, 30);
contexte2D.bezierCurveTo(120, 160, 180, 10, 220, 140);
contexte2D.stroke();
Résultat
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-beziercurveto-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface définissant cette méthode :
CanvasRenderingContext2D
- L'article Wikipédia sur les courbes de Bézier