Metodo Canvas quadraticCurveTo()
Definizione e uso
quadraticCurveTo() Metodo per aggiungere un punto al percorso corrente utilizzando il punto di controllo specificato per la curva quadratic Bezier.
Suggerimento:La curva quadratic Bezier richiede due punti. Il primo punto è il punto di controllo utilizzato nel calcolo quadratic Bezier, il secondo punto è il punto di fine della curva. Il punto di inizio della curva è l'ultimo punto del percorso corrente. Se il percorso non esiste, utilizzare beginPath() e moveTo() Metodo per definire il punto di inizio.
- Punto di inizio: moveTo(
20,20) - Punto di controllo: quadraticCurveTo(
20,100,200,20) - Punto di fine: quadraticCurveTo(20,100,
200,20)
Suggerimento:Vedi anche Metodo bezierCurveTo()。Ha due punti di controllo, non uno.
Esempio
Disegna una curva quadratic 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 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
