Ejemplo
Dibujar una curva Bézier cuadrática:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
El quadraticCurveTo() 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 cuadrática de Bézier.
Una curva cuadrática de Bézier requiere dos puntos. El primer punto es un punto de control que se utiliza en el cálculo de curva cuadrática y el segundo 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 bezierCurveTo() método.Tiene dos puntos de control-en lugar de uno.
| la sintaxis de JavaScript: | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
Los valores de los parámetros
| Parámetro | Descripción | Juegalo |
|---|---|---|
| cpx | La coordenada x del punto de control de Bezier | Juegalo " |
| cpy | La coordenada y del punto de control de Bezier | Juegalo " |
| x | La coordenada x del punto final | Juegalo " |
| y | La coordenada y del punto final | Juegalo " |