Método bezierCurveTo() do canvas HTML

Manual de referência do HTML5 Canvas

Definição e uso

bezierCurveTo() método para adicionar um ponto à trajetória atual usando os pontos de controle específicos da curva bézier.

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

Curva Bézier de Terceira Ordem
  • 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: Método quadraticCurveTo()。Ele tem um ponto de controle, em vez de dois.

Exemplo

Desenhar uma curva bézier de terceiro grau:

O seu navegador não suporta a tag HTML5 canvas.

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();

Experimente você mesmo

Sintaxe

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

Valor do parâmetro

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

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a primeira vez essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do HTML5 Canvas