Nos bénévoles n'ont pas encore traduit cet article en Français. Aidez-nous à réaliser cette tâche !
The CanvasRenderingContext2D
.bezierCurveTo()
method of the Canvas 2D API adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()
before creating the Bézier curve.
Syntax
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
Parameters
cp1x
- The x axis of the coordinate for the first control point.
cp1y
- The y axis of the coordinate for first control point.
cp2x
- The x axis of the coordinate for the second control point.
cp2y
- The y axis of the coordinate for the second control point.
x
- The x axis of the coordinate for the end point.
y
- The y axis of the coordinate for the end point.
Examples
Using the bezierCurveTo
method
This is just a simple code snippet drawing a bezier curve. The control points are red and the start and end points are blue.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50,20); ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); ctx.stroke(); ctx.fillStyle = 'blue'; // start point ctx.fillRect(50, 20, 10, 10); // end point ctx.fillRect(50, 100, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(230, 30, 10, 10); // control point two ctx.fillRect(150, 60, 10, 10);
Trying the bezierCurveTo
parameters
Edit the code below and see your changes update live in the canvas:
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.beziercurveto' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D
- WikiPedia article on Bézier curves.