Draw a cubic bezier curve:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="180" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath();/* www .j a v a2 s . c o m*/ ctx.moveTo(20, 20); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke(); </script> </body> </html>
The bezierCurveTo() method sets the specified control points that represent a cubic bezier curve.
A cubic bezier curve requires three points.
The first two points are control points and the last point is the ending point for the curve.
The starting point for the curve is the last point in the current path.
If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
Parameter Values
| Parameter | Description |
|---|---|
| cp1x | The x-coordinate of the first bezier control point |
| cp1y | The y-coordinate of the first bezier control point |
| cp2x | The x-coordinate of the second bezier control point |
| cp2y | The y-coordinate of the second bezier control point |
| x | The x-coordinate of the ending point |
| y | The y-coordinate of the ending point |