Manuale di riferimento HTML

Completo della tabella HTML

Metodo quadraticCurveTo() su HTML canvas

quadraticCurveTo() è un metodo aggiunto all'API Canvas 2D per aggiungere una curva quadric Bezier al percorso. richiede 2 punti. Il primo punto è il punto di controllo, il secondo punto è il punto finale. Il punto di partenza è l'ultimo punto del percorso corrente, e può essere cambiato utilizzando il metodo moveTo() prima di creare la curva quadric Bezier.

Manuale di riferimento per HTML canvas

Esempio online

Disegna una curva quadric Bezier:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo bezierCurveTo() su HTML canvas - Tutorial di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Testa per vedere ›/

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano quadraticCurveTo() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo quadraticCurveTo() aggiunge un punto alla percorso corrente utilizzando i punti di controllo specificati per la curva quadric Bezier.

La curva quadratic Bezier richiede due punti. Il primo punto è il punto di controllo utilizzato nel calcolo quadratic Bezier, il secondo punto è il punto finale della curva. Il punto di partenza della curva è l'ultimo punto del percorso corrente. Se non esiste un percorso, utilizzare beginPath() e moveTo() Metodo per definire il punto di partenza.

Punto di partenza:

moveTo(20,20)

Punto di controllo:

quadraticCurveTo(20,100,200,20)

Punto finale:

quadraticCurveTo(20,100,200,20)

Suggerimento:Vedere bezierCurveTo() Metodo. Ha due punti di controllo, non uno.

Sintassi JavaScript:	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 finale.
y	Coordinata y del punto finale.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta