HTML-canvas bezierCurveTo() Methode
Voorbeeld
Teken een kubieke Bézier-curve:
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();
Browserondersteuning
Internet Explorer 9, Firefox, Opera, Chrome en Safari ondersteunen de bezierCurveTo()-methode.
Definitie en gebruik
De methode bezierCurveTo() voegt een punt toe aan het huidige pad met behulp van de opgegeven controlepunten die een kubieke Bézier-curve vertegenwoordigen.
Een kubieke bezier-curve vereist drie punten. De eerste twee punten zijn controlepunten die worden gebruikt in de berekening van kubieke Bézier en het laatste punt is het eindpunt voor de curve. Het startpunt voor de curve is het laatste punt in het huidige pad. Als er geen pad bestaat, gebruikt u de methoden beginPath() en moveTo() om een startpunt te definiëren.
Tip: bekijk de methode quadraticCurveTo() eens. Het heeft één controlepunt in plaats van twee.
| JavaScript-syntaxis: | context .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Parameterwaarden
| 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 Canvas-referentie