Método Canvas quadraticCurveTo()
Definição e uso
quadraticCurveTo() Método para adicionar um ponto ao caminho atual usando os pontos de controle especificados para a curva quadrática Bezier.
Dica:A curva quadrática Bezier precisa de dois pontos. O primeiro ponto é o ponto de controle usado no cálculo quadrático Bezier, o segundo ponto é o ponto final da curva. O ponto de início da curva é o último ponto do caminho atual. Se o caminho não existir, 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:Verifique Método bezierCurveTo()。它有两个控制点，而不是一个。
Exemplo
Desenhar uma curva quadrática Bezier:
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();
语法
context.quadraticCurveTo(cpx,cpy,x,y);
参数值
| 参数 | 描述 |
|---|---|
| cpx | 贝塞尔控制点的 x 坐标。 |
| cpy | 贝塞尔控制点的 y 坐标。 |
| x | 结束点的 x 坐标。 |
| y | 结束点的 y 坐标。 |
浏览器支持
表中数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
