Latest web development tutorials

Metodo canvas HTML bezierCurveTo ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Disegna una curva di Bézier cubica:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

metodo di Internet Explorer 9, il supporto per Firefox, Opera, Chrome e Safari bezierCurveTo ().

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

Definizione e utilizzo

Metodo bezierCurveTo () utilizzando i punti di controllo specificati rappresentano curve di Bezier cubi, aggiunge un punto al percorso corrente.

Cubica curva di Bezier richiede tre punti. I primi due punti sono usati per calcolare i punti di controllo cubi Bezier, il terzo punto è il punto finale della curva. Punto iniziale della curva è il percorso corrente nel ultimo punto. Se il percorso non esiste, quindi utilizzare BeginPath () e moveTo () il metodo per definire il punto di partenza.

curva di Bézier cubica

Punto di partenza:
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 arrivo:
bezierCurveTo (20.100.200 mila cento, 200,20)

Suggerimento: Partenza () quadraticCurveTo metodo.Ha un punto di controllo invece di due.


sintassi JavaScript: contesto .bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

Valore parametro

参数 描述
cp1x 第一个贝塞尔控制点的 x 坐标。
cp1y 第一个贝塞尔控制点的 y 坐标。
cp2x 第二个贝塞尔控制点的 x 坐标。
cp2y 第二个贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento