tutorial pengembangan web terbaru
 

HTML canvas bezierCurveTo() Method

<HTML Canvas Referensi

Contoh

Menggambar kurva Bezier kubik:

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();
Cobalah sendiri "

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung bezierCurveTo() metode.

Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung <canvas> elemen.


Definisi dan Penggunaan

The bezierCurveTo() metode menambahkan titik ke jalan saat ini dengan menggunakan titik kontrol tertentu yang mewakili kurva Bezier kubik.

Kurva Bezier kubik membutuhkan tiga poin. pertama dua poin titik kontrol yang digunakan dalam perhitungan Bezier kubik dan titik terakhir adalah titik akhir untuk kurva. Titik awal untuk kurva adalah titik terakhir di jalan saat. Jika jalan tidak ada, gunakan beginPath() dan moveTo() metode untuk menentukan titik awal.

Kurva Bezier kubik

Titik awal
moveTo (20,20)
Kontrol titik 1
bezierCurveTo (20.100, 200,100,200,20)
Kontrol poin 2
bezierCurveTo (20.100, 200.100, 200,20)
titik akhir
bezierCurveTo (20100200100, 200,20)

Tip: Check out quadraticCurveTo() metode.Memiliki satu titik kontrol bukan dua.


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

Nilai parameter

Parameter Deskripsi Mainkan
cp1x X-koordinat titik kontrol Bezier pertama Mainkan "
cp1y Y-koordinat titik kontrol Bezier pertama Mainkan "
cp2x X-koordinat titik kontrol Bezier kedua Mainkan "
cp2y Y-koordinat titik kontrol Bezier kedua Mainkan "
x X-koordinat titik akhir Mainkan "
y Y-koordinat titik akhir Mainkan "

<HTML Canvas Referensi