HTML canvas bezierCurveTo()Método

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

Ejemplo

Dibuja una curva de Bézier cúbica:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,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 bezierCurveTo().

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

Definición y uso

El método bezierCurveTo() agrega un punto a la trayectoria actual utilizando los puntos de control especificados que representan una curva de Bézier cúbica.

Una curva de Bézier cúbica requiere tres puntos. Los dos primeros son puntos de control utilizados en el cálculo de la Bézier cúbica, el tercero es el punto final de la curva. El punto de inicio 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 de inicio.

三次贝塞尔曲线

Punto de inicio:
moveTo(20,20)
Punto de control 1:
bezierCurveTo(20,100,200,100,200,20)
Punto de control 2:
bezierCurveTo(20,100,200,100,200,20)
Punto final:
bezierCurveTo(20,100,200,100,200,20)

Consejo:Consulte elquadraticCurveTo()método. Tiene un punto de control, no dos.


Sintaxis de JavaScript: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Valores de parámetros

Parámetro Descripción
cp1x La coordenada x del primer punto de control de Bézier.
cp1y La coordenada y del primer punto de control de Bézier.
cp2x La coordenada x del segundo punto de control de Bézier.
cp2y La coordenada y del segundo 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