Canvas quadraticCurveTo() metod

Canvas referenshandbok

Definition och användning

quadraticCurveTo() metoden för att lägga till en punkt till den aktuella vägen genom att använda den specifika kontrollpunkten för den kvadratiska Bézier-kurvan.

Tips:En kvadratisk Bézier-kurva behöver två punkter. Den första punkten är kontrollpunkten för den kvadratiska Bézierberäkningen, den andra punkten är kurvans slutpunkt. Kurvans startpunkt är den sista punkten i den aktuella vägen. Om vägen inte finns, använd beginPath() och moveTo() metoder för att definiera startpunkten.

Tvågradig Bézier-kurva
  • Startpunkt: moveTo(20,20)
  • Kontrollpunkt: quadraticCurveTo(20,100,200,20)
  • Slutpunkt: quadraticCurveTo(20,100,200,20)

Tips:Se till bezierCurveTo() metodenDet har två kontrollpunkter, inte en.

Exempel

Rita en kvadratisk Bézier-kurva:

Din webbläsare stöder inte HTML5 canvas-taggen.

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();

Prova själv

Syntax

context.quadraticCurveTo(cpx,cpy,x,y);

Parametervärde

Parameter Beskrivning
cpx X-koordinaten för Bézier-kontrollpunkten.
cpy Y-koordinaten för Bézier-kontrollpunkten.
x X-koordinaten för slutpunkten.
y Y-koordinaten för slutpunkten.

Webbläsarstöd

Tabellen siffror anger den första webbläsarens version som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

Canvas referenshandbok