HTML canvas quadraticCurveTo() methode
Definitie en gebruik
quadraticCurveTo()
methode om een punt toe te voegen aan het huidige pad door gebruik te maken van de specifieke controlepunten van de quadratische Bezier-kromme.
Tip:Een quadratische Bezier-kromme vereist twee punten. De eerste is het controlepunt voor de quadratische Bezier-berekening, de tweede is het eindpunt van de kromme. Het startpunt van de kromme is de laatste punt in het pad. Als het pad niet bestaat, gebruik dan beginPath() en moveTo() methode om de startpunt te definiëren.

- Startpunt: moveTo(
20
,20
) - Controlepunt: quadraticCurveTo(
20
,100
,200,20) - Eindpunt: quadraticCurveTo(20,100,
200
,20
)
Tip:Bekijk bezierCurveTo() methode。Het heeft twee controlepunten in plaats van één.
Voorbeeld
Tekening van een quadratische Bezier-kromme:
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();
Syntax
context.quadraticCurveTo(cpx,cpy,x,y);
Parameter value
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 endpoint. |
y | The y-coordinate of the endpoint. |
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.