HTML-doek bezierCurveTo() Metode
Voorbeeld
Teken 'n kubieke Bézier-kromme:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
Blaaierondersteuning
Internet Explorer 9, Firefox, Opera, Chrome en Safari ondersteun die bezierCurveTo()-metode.
Definisie en gebruik
Die bezierCurveTo()-metode voeg 'n punt by die huidige pad deur die gespesifiseerde beheerpunte te gebruik wat 'n kubieke Bézier-kromme verteenwoordig.
'n Kubieke bezier-kromme vereis drie punte. Die eerste twee punte is kontrolepunte wat in die kubieke Bézier-berekening gebruik word en die laaste 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.
Beginpunt
skuif na ( 20,20 )
Beheerpunt 1
bezierCurveTo( 20,100 ,200,100,200,20)
Beheerpunt 2
bezierCurveTo(20,100, 200,100 ,200,20)
Eindpunt
bezierCurveTo(20,100,200,100, 200,20 )
Wenk: Kyk na die quadraticCurveTo() metode. Dit het een beheerpunt in plaas van twee.
| JavaScript-sintaksis: | konteks .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Parameterwaardes
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML-doekverwysing