Manual de Referência HTML

大全 de etiquetas HTML

Método bezierCurveTo() no HTML canvas

bezierCurveTo() é um método do Canvas 2O método bezierCurveTo() é usado no Canvas D API para desenhar uma trajetória de curva de Bézier de terceiro grau. Este método requer três pontos. O primeiro e o segundo pontos são pontos de controle, e o terceiro ponto é o ponto final. O ponto inicial é o último ponto do caminho atual, e pode ser modificado antes de desenhar a curva de Bézier chamando moveTo().

Manual de referência do canvas HTML

Exemplo online

Desenhar uma curva de Bézier de terceiro grau:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método bezierCurveTo() no HTML canvas-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
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();
</script>　
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam bezierCurveTo() Método.

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método bezierCurveTo() adiciona pontos ao caminho atual usando pontos de controle que representam uma curva de Bézier de terceiro grau.

Para uma curva de Bézier de terceiro grau são necessários três pontos. Os dois primeiros pontos são usados como pontos de controle na cálculo da curva de Bézier, e o terceiro ponto é o ponto final da curva. O ponto inicial da curva é o último ponto da trajetória atual. Se não houver trajetória, use beginPath() e moveTo() Método para definir o ponto inicial.

Ponto inicial:

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

Dica:Veja também quadraticCurveTo() Método. Ele tem um ponto de controle, não dois.

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

Valor do parâmetro

Parâmetro	Descrição
cp1x	Coordenada x do primeiro ponto de controle.
cp1y	Coordenada y do primeiro ponto de controle.
cp2x	Coordenada x do segundo ponto de controle.
cp2y	Coordenada y do segundo ponto de controle.
x	Coordenada x do ponto final.
y	Coordenada y do ponto final.

Manual de referência do canvas HTML

HTML: <template> tag