HTML lienzo bezierCurveTo() Método
Ejemplo
Dibujar una curva de Bézier cúbica:
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
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.
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