Canvas bezierCurveTo() yöntemi

Canvas referans el kitabı

Tanım ve Kullanım

bezierCurveTo() yöntemini kullanarak belirtilen kontrol noktalarını kullanarak mevcut yola bir nokta ekleyin.

İpucu:Üçlü Bezier çizgisi üç noktaya ihtiyaç duyar. İlk iki nokta, üçlü Bezier hesaplamasında kontrol noktalarıdır, üçüncü nokta ise çizginin bitiş noktasıdır. Çizginin başlangıç noktası, mevcut yoldaki en son noktadır. Yol不存在, lütfen beginPath() ve moveTo() yöntemleri ile başlangıç noktasını tanımlayın.

Üç kez Bezier eğrisi
  • Başlangıç noktası: moveTo(20,20)
  • Kontrol noktası 1: bezierCurveTo(20,100,200,100,200,20)
  • Kontrol noktası 2: bezierCurveTo(20,100,200,100,200,20)
  • Son nokta: bezierCurveTo(20,100,200,100,200,20)

İpucu:Bakınız quadraticCurveTo() yöntemi。Bu, iki yerine bir kontrol noktasına sahiptir.

Örnek

Bir üçlü Bezier çizgi çizin:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

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

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> elementini desteklememektedir.

Canvas referans el kitabı