HTML canvas quadraticCurveTo() method
Definition and usage
quadraticCurveTo() method to add a point to the current path by using the specified control points of the quadratic Bezier curve.
Hint: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 endpoint of the curve. The starting point of the curve is the last point in the current path. If the path does not exist, then please use beginPath() and moveTo() method to define the starting point.
- Starting point: moveTo(
20,20) - Control point: quadraticCurveTo(
20,100,200,20) - End point: quadraticCurveTo(20,100,
200,20)
Hint:Please see bezierCurveTo() method。It has two control points instead of one.
Example
Draw a quadratic Bezier curve:
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();
Syntaksi
context.quadraticCurveTo(cpx,cpy,x,y);
Parametrien arvot
| Parametrit | Kuvaus |
|---|---|
| cpx | Bezier-kontrollipisteen x-akselin arvo. |
| cpy | Bezier-kontrollipisteen y-akselin arvo. |
| x | Päätepisteen x-akselin arvo. |
| y | Päätepisteen y-akselin arvo. |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.
