Método HTML canvas quadraticCurveTo()
Ejemplo
Dibujar una curva de 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();
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Definición y uso
El método quadraticCurveTo() agrega un punto a la ruta actual mediante el uso de los puntos de control especificados que representan una curva de Bézier cuadrática.
Una curva de Bézier cuadrática requiere dos puntos. El primer punto es un punto de control que se utiliza en el cálculo Bézier cuadrático y el segundo 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 bezierCurveTo() . Tiene dos puntos de control en lugar de uno.
| Sintaxis de JavaScript: | contexto .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
Valores paramétricos
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ Referencia de lienzo HTML