Exemplo
Desenhar uma curva de Bezier 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(); Tente você mesmo " Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
Definição e Uso
O quadraticCurveTo() método adiciona um ponto para o percurso de corrente através dos pontos especiais de controlo, que representam uma curva de Bezier quadrática.
Uma curva quadrática Bezier requer dois pontos. O primeiro ponto é um ponto de controlo que é utilizado no cálculo de Bezier quadrática e o segundo ponto é o ponto final para a curva. O ponto de partida para a curva é o último ponto no caminho atual. Se um caminho não existe, usar os beginPath() e moveTo() métodos para definir um ponto de partida.
Tip: Confira o bezierCurveTo() método. Ele tem dois pontos de controle em vez de um.
| sintaxe JavaScript: | context . quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| cpx | A coordenada x do ponto de controlo de Bezier | Jogue " |
| cpy | A coordenada y do ponto de controlo de Bezier | Jogue " |
| x | A coordenada x do ponto final | Jogue " |
| y | A coordenada y do ponto de término | Jogue " |