Método HTML canvas quadraticCurveTo()
Definición y uso
quadraticCurveTo() método para agregar un punto a la ruta actual utilizando el punto de control especificado para la curva cuadrática Bezier.
Consejo:Una curva cuadrática Bezier necesita dos puntos. El primer punto es el punto de control utilizado en el cálculo cuadrático Bezier, el segundo punto es el punto final de la curva. El punto de inicio de la curva es el último punto de la ruta actual. Si no existe una ruta, utilice beginPath() y moveTo() método para definir el punto de inicio.
- Punto de inicio: moveTo(
20,20) - Punto de control: quadraticCurveTo(
20,100,200,20) - Punto final: quadraticCurveTo(20,100,
200,20)
Consejo:Ver: Método bezierCurveTo(). Tiene dos puntos de control, en lugar de uno.
Ejemplo
Dibujar una curva cuadrática Bezier:
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();
Sintaxis
context.quadraticCurveTo(cpx,cpy,x,y);
Valor del parámetro
| Parámetros | Descripción |
|---|---|
| cpx | Coordenada x del punto de control de Bezier. |
| cpy | Coordenada y del punto de control de Bezier. |
| x | Coordenada x del punto final. |
| y | Coordenada y del punto final. |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
