HTML canvas bezierCurveTo()Método

Canvas 对象参考手册Objeto Canvas

Ejemplo

Dibuja una curva 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 soportan el método bezierCurveTo().

Nota:Internet Explorer 8 y versiones anteriores no soportan 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 Bézier cúbica.

Una curva Bézier cúbica requiere tres puntos. Los primeros dos puntos son puntos de control utilizados en el cálculo de la curva Bézier cúbica, el tercer 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, utilicebeginPath()ymoveTo()el método para definir el punto inicial.

三次贝塞尔曲线

Punto inicial:
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, en lugar de 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.

Canvas 对象参考手册Objeto Canvas

Otras extensiones