Latest web development tutorials

HTML canvas bezierCurveTo () method

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Draws a cubic Bezier curve:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
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 ExplorerFirefoxOperaGoogle ChromeSafari

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.

Cubic Bezier curve

Start point:
moveTo (20,20)
Control Point 1:
bezierCurveTo (20,100, 200,100,200,20)
Control Point 2:
bezierCurveTo (20,100, 200,100, 200,20)
End point:
bezierCurveTo (20,100,200,100, 200,20)

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 HTML canvas Reference Manual