Metodo Canvas bezierCurveTo()

Manuale di riferimento Canvas

Definizione e uso

bezierCurveTo() Metodo per aggiungere un punto al percorso corrente utilizzando i punti di controllo specificati per la curva bezier di terzo grado.

Suggerimento:Una curva bezier di terzo grado richiede tre punti. I primi due punti sono usati come punti di controllo nel calcolo della curva bezier, il terzo punto è il punto di arrivo della curva. Il punto di partenza della curva è l'ultimo punto del percorso corrente. Se il percorso non esiste, utilizzare beginPath() e moveTo() Metodo per definire il punto di partenza.

Curva di Bézier a tre punti
  • 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,100,200,20)

Suggerimento:Vedi anche Metodo quadraticCurveTo()。Ha un solo punto di controllo, non due.

Esempio

Disegna una curva bezier di terzo grado:

Il tuo browser non supporta il tag HTML5 canvas.

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

亲自试一试

语法

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

参数值

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

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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>.

Manuale di riferimento Canvas