HTML canvas quadraticCurveTo()Método

Canvas 对象参考手册Objeto Canvas

Ejemplo

Dibuja una curva de Bézier cuadrática:

YourbrowserdoesnotsupporttheHTML5canvastag.

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();

Pruébalo »

Soporte del navegador

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método quadraticCurveTo().

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

El método quadraticCurveTo() agrega un punto a la ruta actual mediante el uso de un punto de control especificado que representa una curva de Bézier cuadrática.

Una curva de Bézier cuadrática requiere dos puntos. El primer punto es el punto de control utilizado en el cálculo de la curva de Bézier cuadrática, y 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 la ruta no existe, usebeginPath()ymoveTo() el 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:Consulta elbezierCurveTo()método. Tiene dos puntos de control, en lugar de uno.


Sintaxis de JavaScript: context.quadraticCurveTo(cpx,cpy,x,y);

Valores de parámetros

Parámetro Descripción
cpx La coordenada x del punto de control de Bézier.
cpy La coordenada y del punto de control de Bézier.
x La coordenada x del punto final.
y La coordenada y del punto final.

Canvas 对象参考手册Objeto Canvas

Otras extensiones