Latest web development tutorials

bezierCurveTo tela HTML () Método

HTML Manual de lona Referência HTML Manual de lona Referência

Exemplos

Desenha uma curva de 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();

tente »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, suporte Firefox, Opera, Chrome e Safari bezierCurveTo () método.

Nota: 8 e versões anteriores do Internet Explorer não suportam o elemento <canvas>.

Definição e Uso

bezierCurveTo () método usando os pontos de controle especificados representam curvas Bezier cúbicos, acrescenta um ponto para o caminho atual.

curva de Bezier cúbica requer três pontos. Os dois primeiros pontos são utilizados para calcular os pontos de controlo de Bezier cúbicos, o terceiro ponto é o ponto final da curva. ponto inicial da curva é o caminho atual no último ponto. Se o caminho não existir, então use BeginPath () e moveTo () método para definir o ponto de partida.

curva de Bezier cúbica

Ponto de partida:
moveTo (20,20)
Ponto de Controle 1:
bezierCurveTo (20.100, 200,100,200,20)
Ponto de Controle 2:
bezierCurveTo (20.100, 200.100, 200,20)
Ponto final:
bezierCurveTo (20100200100, 200,20)

Dica: Confira quadraticCurveTo () método.Tem um ponto de controlo em vez de dois.


sintaxe JavaScript: contexto .bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

parâmetro Valor

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

HTML Manual de lona Referência HTML Manual de lona Referência