HTML canvas quadraticCurveTo()Method

Canvas 对象参考手册Canvas Object

Example

Draw 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 Yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

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

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

Definition and Usage

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

A quadratic Bezier curve requires two points. The first point is the control point used in the quadratic Bezier calculation, and the second point is the end point of the curve. The start point of the curve is the last point in the current path. If the path does not exist, use thebeginPath()andmoveTo() method to define the start point.

二次贝塞尔曲线
  • Start point: moveTo(20,20)
  • Control point: quadraticCurveTo(20,100,200,20)
  • End point: quadraticCurveTo(20,100,200,20)

Tip:Please see thebezierCurveTo()method. It has two control points instead of one.


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

Parameter Values

Parameter Description
cpx The x-coordinate of the Bezier control point.
cpy The y-coordinate of the Bezier control point.
x The x-coordinate of the end point.
y The y-coordinate of the end point.

Canvas 对象参考手册Canvas Object

Other Extensions