Exemplo
Desenhar uma curva de Bezier cúbica:
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 você mesmo " Suporte a navegadores
Internet Explorer 9, Firefox, Opera, Chrome e Safari apoiar o bezierCurveTo() método.
Nota: Internet Explorer 8 e versões anteriores, não suportam o <canvas> elemento.
Definição e Uso
O bezierCurveTo() método adiciona um ponto para o caminho atual usando os pontos de controle específicos que representam uma curva de Bezier cúbica.
A curva de bezier cúbica requer três pontos. Os dois primeiros pontos são pontos de controlo que são utilizados no cálculo de Bezier cúbico e o último ponto é o ponto final para a curva. O ponto de partida para a curva é o último ponto no caminho da corrente. Se um caminho não existir, use as beginPath() e moveTo() métodos para definir um ponto de partida.
Dica: Confira a quadraticCurveTo() método.Ele tem um ponto em vez de dois controle.
| sintaxe JavaScript: | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| cp1x | A coordenada x do primeiro ponto de controle de Bezier | Jogue " |
| cp1y | A coordenada y do primeiro ponto de controle de Bezier | Jogue " |
| cp2x | A coordenada x do segundo ponto de controle de Bezier | Jogue " |
| cp2y | A coordenada y do segundo ponto de controle de Bezier | Jogue " |
| x | A coordenada x do ponto final | Jogue " |
| y | A coordenada y do ponto final | Jogue " |