Latest web development tutorials

HTML canvas quadraticCurveTo () method

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Draws a quadratic Bezier curve:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

try it"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support quadraticCurveTo () method.

Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.

Definition and Usage

quadraticCurveTo () method by using the specified control points represent a quadratic Bezier curves, adds a point to the current path.

Quadratic Bezier curves need two points. The first point is used to calculate the quadratic Bezier control point, the second 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.

Quadratic Bezier curve

Start point:
moveTo (20,20)
Control points:
quadraticCurveTo (20,100, 200,20)
End point:
quadraticCurveTo (20,100, 200,20)

Tip: Check out bezierCurveTo () method.It has two control points instead of one.


JavaScript syntax: context .quadraticCurveTo (cpx, cpy, x, y);

Parameter Value

参数 描述
cpx 贝塞尔控制点的 x 坐标。
cpy 贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。

HTML canvas Reference Manual HTML canvas Reference Manual