Metodo HTML canvas quadraticCurveTo()
Definizione e uso
quadraticCurveTo() metodo per aggiungere un punto al percorso corrente utilizzando il punto di controllo specificato per la curva bezier quadratica.
Suggerimento:La curva bezier quadratica richiede due punti. Il primo punto è il punto di controllo utilizzato nel calcolo bezier quadratico, 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 bezier quadratica:
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();
Sintassi
context.quadraticCurveTo(cpx,cpy,x,y);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| cpx | Coordinata x del punto di controllo Bezier. |
| cpy | Coordinata y del punto di controllo Bezier. |
| x | Coordinata x del punto di fine. |
| y | Coordinata y del punto di fine. |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| 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>.
