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 a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | sim | 9 | sim | sim | sim |
Definição e Uso
O quadraticCurveTo() método adiciona um ponto para o caminho atual usando os pontos de controle específicos que representam uma curva de Bezier quadrática.
A curva de Bezier quadrática requer dois pontos. O primeiro ponto é um ponto de controle que é usado no cálculo Bezier quadrática eo segundo 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.
Ponto de partida:
moveTo (20,20) Ponto de controlo:
quadraticCurveTo (20.100, 200,20) Ponto final:
quadraticCurveTo (20.100, 200,20) Dica: Confira a 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 Bezier | Jogue " |
| cpy | A coordenada y do ponto de controle de Bezier | Jogue " |
| x | A coordenada x do ponto final | Jogue " |
| y | A coordenada y do ponto final | Jogue " |