Método quadráticoCurveTo() da tela HTML
Exemplo
Desenhe uma curva Bézier quadrática:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
Method | |||||
---|---|---|---|---|---|
quadraticCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definição e uso
O método quadraticCurveTo() adiciona um ponto ao caminho atual usando os pontos de controle especificados que representam uma curva Bézier quadrática.
Uma curva quadrática de Bézier requer dois pontos. O primeiro ponto é um ponto de controle que é usado no cálculo quadrático de Bézier e o segundo 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:
moverPara( 20, 20 )
Ponto de controlo:
quadráticaCurvePara ( 20, 100 , 200, 20)
Ponto final:
quadráticaCurveTo (20, 100, 200, 20 )
Dica: Confira o método bezierCurveTo() . Tem dois pontos de controle em vez de um.
Sintaxe JavaScript: | context .quadraticCurveTo( cpx, cpy, x, y ); |
---|
Valores de parâmetro
Parameter | Description | Play it |
---|---|---|
cpx | The x-coordinate of the Bézier control point | |
cpy | The y-coordinate of the Bézier control point | |
x | The x-coordinate of the ending point | |
y | The y-coordinate of the ending point |