HTML canvas quadraticCurveTo () method
Examples
Draws a quadratic Bezier curve:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
try it"
Browser Support
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.
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