HTML-doek quadraticCurveTo() Metode

❮ HTML-doekverwysing

Voorbeeld

Teken 'n kwadratiese Bézier-kromme:

Jou blaaier ondersteun nie die HTML5-skerm nie.

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

Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.

Method
quadraticCurveTo() Yes 9.0 Yes Yes Yes

Definisie en gebruik

Die quadraticCurveTo()-metode voeg 'n punt by die huidige pad deur die gespesifiseerde beheerpunte te gebruik wat 'n kwadratiese Bézier-kromme verteenwoordig.

'n Kwadratiese Bézier-kromme vereis twee punte. Die eerste punt is 'n kontrolepunt wat in die kwadratiese Bézier-berekening gebruik word en die tweede punt is die eindpunt vir die kromme. Die beginpunt vir die kromme is die laaste punt in die huidige pad. As 'n pad nie bestaan ​​nie, gebruik die beginPath() en moveTo() metodes om 'n beginpunt te definieer.

'n Kwadratiese Bézier-kromme

Beginpunt:
skuif na ( 20,20 )
Beheerpunt:
quadraticCurveTo ( 20,100 , 200,20)
Eindpunt:
quadraticCurveTo (20,100, 200,20 )

Wenk: Kyk na die bezierCurveTo() metode. Dit het twee beheerpunte in plaas van een.


JavaScript-sintaksis: konteks .quadraticCurveTo( cpx,cpy,x,y );

Parameterwaardes

Parameter Description Play it
cpx The x-coordinate of the Bézier control point
cpy The y-coordinate of the Bézier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point

❮ HTML-doekverwysing