HTML canvas bezierCurveTo () method
Examples
Draws a cubic Bezier curve:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support bezierCurveTo () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
bezierCurveTo () method by using the specified control points represent cubic Bezier curves, adds a point to the current path.
Cubic Bezier curve requires three points. The first two points are used to calculate the cubic Bezier control points, the third point is the end point of the curve. Start point of the curve is the current path in the last point. If the path does not exist, then use beginPath () and moveTo () method to define the starting point.
Tip: Check out quadraticCurveTo () method.It has a control point instead of two.
JavaScript syntax: | context .bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y); |
---|
Parameter Value
参数 | 描述 |
---|---|
cp1x | 第一个贝塞尔控制点的 x 坐标。 |
cp1y | 第一个贝塞尔控制点的 y 坐标。 |
cp2x | 第二个贝塞尔控制点的 x 坐标。 |
cp2y | 第二个贝塞尔控制点的 y 坐标。 |
x | 结束点的 x 坐标。 |
y | 结束点的 y 坐标。 |
HTML canvas Reference Manual