Ejemplo
Dibujar una curva de Bezier 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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definición y Uso
El quadraticCurveTo() método añade un punto a la trayectoria de la corriente mediante el uso de los puntos de control especificados que representan una curva de Bezier cuadrática.
Una curva de Bezier cuadrática requiere dos puntos. El primer punto es un punto de control que se utiliza en el cálculo de Bézier cuadrática y el segundo punto es el punto final para la curva. El punto de partida para la curva es el último punto en la trayectoria de corriente. 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 Bezier | Juegalo " |
| cpy | La coordenada y del punto de control Bezier | Juegalo " |
| x | La coordenada x del punto de finalización | Juegalo " |
| y | La coordenada y del punto final | Juegalo " |