Canvas bezierCurveTo() methode
Definitie en gebruik
bezierCurveTo() methode om een punt toe te voegen aan het huidige pad door gebruik te maken van de gespecificeerde knopen van de drievoudige Bezier-kromming.
Tip:Een drievoudige Bezier-kromming vereist drie punten. De eerste twee punten zijn de knopen die gebruikt worden in de drievoudige Bezier-berekening, en het derde punt is het einde van de kromming. Het startpunt van de kromming is de laatste punt in de huidige pad. Als het pad niet bestaat, gebruik dan beginPath() en moveTo() methoden om het startpunt te definiëren.
- Startpunt: moveTo(
20,20) - Knop 1: bezierCurveTo(
20,100,200,100,200,20) - Knop 2: bezierCurveTo(20,100,
200,100,200,20) - Eindpunt: bezierCurveTo(20,100,200,100,
200,20)
Tip:Bekijk ook quadraticCurveTo() methode. Het heeft één knop in plaats van twee.
Voorbeeld
Teken een drievoudige Bezier-kromming:
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();
Syntaxis
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Parameterwaarde
| Parameter | Beschrijving |
|---|---|
| cp1x | X-coördinaat van de eerste Bezier-knop. |
| cp1y | Y-coördinaat van de eerste Bezier-knop. |
| cp2x | X-coördinaat van de tweede Bezier-knop. |
| cp2y | Y-coördinaat van de tweede Bezier-knop. |
| x | X-coördinaat van het einde. |
| y | Y-coördinaat van het einde. |
Browserondersteuning
Tafelnummers vermelden de versie van de browser die het eerste volledig ondersteunt.
| 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.
