Método bezierCurveTo() da tela HTML
Exemplo
Desenhe uma curva de Bézier 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();
Suporte ao navegador
Internet Explorer 9, Firefox, Opera, Chrome e Safari suportam o método bezierCurveTo().
Definição e uso
O método bezierCurveTo() adiciona um ponto ao caminho atual usando os pontos de controle especificados que representam uma curva Bézier cúbica.
Uma curva de bezier cúbica requer três pontos. Os dois primeiros pontos são pontos de controle que são usados no cálculo de Bézier cúbico e o último ponto é o ponto final da curva. O ponto inicial para a curva é o último ponto no caminho atual. Se um caminho não existir, use os métodos beginPath() e moveTo() para definir um ponto de partida.
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(20,100,200,100, 200,20 )
Dica: Confira o método quadráticoCurveTo() . Tem um ponto de controle em vez de dois.
| Sintaxe JavaScript: | context .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Valores de parâmetro
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ Referência de tela HTML