Ejemplo
Dibujar una curva de Bezier:
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(); Inténtalo tú mismo " Soporte para el navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari apoyan la bezierCurveTo() método.
Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el <canvas> elemento.
Definición y Uso
El bezierCurveTo() método agrega un punto a la trayectoria de la corriente mediante el uso de los puntos de control específicos que representan una curva de Bezier.
Una curva Bézier cúbica requiere tres puntos. Los dos primeros puntos son puntos de control que se utilizan en el cálculo de curva cúbica y el último punto es el punto final de la curva. El punto de partida de la curva es el último punto en la ruta actual. Si no existe una ruta de acceso, utilizar los beginPath() y moveTo() métodos para definir un punto de partida.
Tip: Salida del quadraticCurveTo() método.Tiene un punto en lugar de dos de control.
| la sintaxis de JavaScript: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
Los valores de los parámetros
| Parámetro | Descripción | Juegalo |
|---|---|---|
| cp1x | La coordenada x del primer punto de control Bézier | Juegalo " |
| cp1y | La coordenada del primer punto de control Bézier | Juegalo " |
| cp2x | La coordenada x del segundo punto de control Bézier | Juegalo " |
| cp2y | La coordenada del segundo punto de control Bézier | Juegalo " |
| x | La coordenada x del punto final | Juegalo " |
| y | La coordenada y del punto final | Juegalo " |