Método HTML canvas quadraticCurveTo()
Definição e uso
quadraticCurveTo() método para adicionar um ponto à trajetória atual usando os pontos de controle especificados para a curva bézier quadrática.
Dica:A curva bézier quadrática requer dois pontos. O primeiro ponto é o ponto de controle utilizado no cálculo bézier quadrático, e o segundo ponto é o ponto final da curva. O ponto de início 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 de início.
- Ponto de início: moveTo(
20,20) - Ponto de controle: quadraticCurveTo(
20,100,200,20) - Ponto final: quadraticCurveTo(20,100,
200,20)
Dica:Consulte Método bezierCurveTo()。Ele tem dois pontos de controle, não um só.
Exemplo
Desenhar 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();
Sintaxe
context.quadraticCurveTo(cpx,cpy,x,y);
Valor do parâmetro
| Parâmetros | Descrição |
|---|---|
| cpx | Coordenada x do ponto de controle da Bézier. |
| cpy | Coordenada y do ponto de controle da Bézier. |
| 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 propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.
