Metodo bezierCurveTo() del canvas HTML
Definizione e uso
bezierCurveTo() metodo per aggiungere un punto al percorso corrente utilizzando i punti di controllo specificati per la curva bezier.
Suggerimento:Per disegnare una curva bezier di terzo grado sono necessari tre punti. I primi due punti sono usati come punti di controllo nel calcolo della curva bezier, il terzo 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 1: bezierCurveTo(
20,100,200,100,200,20) - Punto di controllo 2: bezierCurveTo(20,100,
200,100,200,20) - Punto di fine: bezierCurveTo(20,100,200,100,
200,20)
Suggerimento:Vedi Metodo quadraticCurveTo()。Ha un punto di controllo, non due.
Esempio
Disegna una curva bezier di terzo grado:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Sintassi
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| cp1x | Coordinata x del primo punto di controllo Bezier. |
| cp1y | Coordinata y del primo punto di controllo Bezier. |
| cp2x | Coordinata x del secondo punto di controllo Bezier. |
| cp2y | Coordinata y del secondo 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>.
