Latest web development tutorials

bezierCurveTo lienzo HTML método ()

Objeto de la lona de referencia objeto Canvas

Ejemplos

Dibuja una curva Bezier 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();

Trate »

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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


Definición y Uso

bezierCurveTo método () mediante el uso de los puntos de control especificados representan las curvas de Bezier cúbicos, añade un punto a la ruta actual.

curva de Bezier requiere tres puntos. Los dos primeros puntos se utilizan para calcular los puntos de control de Bezier cúbicos, el tercer punto es el punto final de la curva. punto de la curva de inicio es la trayectoria de la corriente en el último punto. Si no existe la ruta, a continuación, utilizar beginPath () y moveTo () método para definir el punto de partida.

curva de Bezier

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 (20100200100, 200,20)

Tip: Salida () quadraticCurveTo método.Tiene un punto en lugar de dos de control.


la sintaxis de JavaScript: contexto .bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

parámetro Valor

参数 描述
cp1x 第一个贝塞尔控制点的 x 坐标。
cp1y 第一个贝塞尔控制点的 y 坐标。
cp2x 第二个贝塞尔控制点的 x 坐标。
cp2y 第二个贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。


Objeto de la lona de referencia objeto Canvas