Metodo quadraticCurveTo() della tela HTML

❮ Riferimento tela HTML

Esempio

Disegna una curva di Bézier quadratica:

Il tuo browser non supporta il canvastag HTML5.

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();

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
quadraticCurveTo() Yes 9.0 Yes Yes Yes

Definizione e utilizzo

Il metodo quadraticCurveTo() aggiunge un punto al percorso corrente utilizzando i punti di controllo specificati che rappresentano una curva di Bézier quadratica.

Una curva di Bézier quadratica richiede due punti. Il primo punto è un punto di controllo utilizzato nel calcolo quadratico di Bézier e il secondo punto è il punto finale della curva. Il punto iniziale della curva è l'ultimo punto del percorso corrente. Se non esiste un percorso, utilizzare i metodi beginPath() e moveTo() per definire un punto di partenza.

Una curva di Bézier quadratica

Punto di partenza:
vai a( 20,20 )
Punto di controllo:
quadraticCurveTo(20,100,200,20)
Punto finale:
quadraticCurveTo(20,100,200,20)

Suggerimento: controlla il metodo bezierCurveTo() . Ha due punti di controllo invece di uno.


sintassi JavaScript: contesto .quadraticCurveTo( cpx,cpy,x,y );

Valori dei parametri

Parameter Description Play it
cpx The x-coordinate of the Bézier control point
cpy The y-coordinate of the Bézier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point

❮ Riferimento tela HTML