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
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y uso
El método bezierCurveTo() agrega un punto a la ruta actual utilizando 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 partida.
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 |