HTML lienzo bezierCurveTo() Método

❮ Referencia de lienzo HTML

Ejemplo

Dibujar una curva de Bézier cúbica:

Su navegador no es compatible con HTML5canvastag.

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

Compatibilidad con navegador

explorador de Internet Firefox Ópera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método bezierCurveTo().


Definición y uso

El método bezierCurveTo() agrega un punto a la ruta actual usando los puntos de control especificados que representan una curva Bézier cúbica.

Una curva bezier cúbica requiere tres puntos. Los dos primeros puntos son puntos de control que se utilizan en el cálculo de Bézier cúbico y el último punto es el punto final de la curva. El punto de partida de la curva es el último punto de la ruta actual. Si no existe una ruta, utilice los métodos beginPath() y moveTo() para definir un punto de inicio.

Una curva bezier cúbica

Punto de partida
mover a( 20,20 )
Punto de mando 1
bezierCurveTo( 20,100 ,200,100,200,20)
Punto de control 2
bezierCurveTo(20,100, 200,100 , 200,20)
punto final
bezierCurveTo(20,100,200,100, 200,20 )

Sugerencia: compruebe el método quadraticCurveTo() . Tiene un punto de control en lugar de dos.


Sintaxis de JavaScript: contexto .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y );

Valores paramétricos

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

❮ Referencia de lienzo HTML