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.

Bisectrice Bezier-kromme
  • 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:

Uw browser ondersteunt de HTML5 canvas tag niet.

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

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.