HTML canvas quadraticCurveTo()Método

HTML canvas 参考手册Manual de referencia de HTML canvas

Ejemplo

Dibujar 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 son compatibles con el método quadraticCurveTo().

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.

Definición y uso

El método quadraticCurveTo() agrega un punto a la trayectoria actual usando el 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 Bézier cuadrática, y el segundo punto es el punto final de la curva. El punto inicial de la curva es el último punto de la trayectoria actual. Si la trayectoria no existe, utilice elbeginPath()ymoveTo() método para definir el punto inicial.

二次贝塞尔曲线

Punto inicial:
moveTo(20,20)
Punto de control:
quadraticCurveTo(20,100,200,20)
Punto final:
quadraticCurveTo(20,100,200,20)

Consejo:Consulte 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.

HTML canvas 参考手册Manual de referencia de HTML canvas Otras extensiones