HTML canvas bezierCurveTo() methode
Definitie en gebruik
bezierCurveTo() methode om een punt toe te voegen aan het huidige pad door gebruik te maken van de specifieke controlepunten van de drievoudige Bezier-kromming.
Tip:Een drievoudige Bezier-kromming vereist drie punten. De eerste twee punten zijn controlepunten voor de drievoudige Bezier-berekening, het derde punt is het eindpunt van de kromming. Het startpunt van de kromming is de laatste punt in het huidige pad. Als het pad niet bestaat, gebruik dan beginPath() en moveTo() methode om de startpunt te definiëren.
- Startpunt: moveTo(
20,20) - Controlepunt 1: bezierCurveTo(
20,100,200,100,200,20) - Controlepunt 2: bezierCurveTo(20,100,
200,100,200,20) - Eindpunt: bezierCurveTo(20,100,200,100,
200,20)
Tip:Bekijk quadraticCurveTo() methode。Het heeft een controlepunt, niet twee.
Voorbeeld
Teken van 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();
Syntax
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Parameter value
| Parameter | Description |
|---|---|
| cp1x | The x-coordinate of the first Bezier control point. |
| cp1y | The y-coordinate of the first Bezier control point. |
| cp2x | The x-coordinate of the second Bezier control point. |
| cp2y | The y-coordinate of the second Bezier control point. |
| x | The x-coordinate of the endpoint. |
| y | The y-coordinate of the endpoint. |
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| 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.
