Metode Canvas bezierCurveTo()
Definisi dan penggunaan
bezierCurveTo() metode untuk menambahkan titik ke jalur saat ini menggunakan titik kontrol yang ditunjukkan garis Bezier tiga tingkat.
Petunjuk:Garis Bezier tiga tingkat memerlukan tiga titik. Dua titik pertama digunakan sebagai titik kontrol dalam perhitungan Bezier tiga tingkat, sedangkan titik ketiga adalah titik akhir garis. Titik awal garis adalah titik terakhir dalam jalur saat ini. Jika jalur tidak ada, gunakan beginPath() dan moveTo() metode untuk mendefinisikan titik awal.
- Titik awal: moveTo(
20,20) - Titik kontrol 1: bezierCurveTo(
20,100,200,100,200,20) - Titik kontrol 2: bezierCurveTo(20,100,
200,100,200,20) - Titik akhir: bezierCurveTo(20,100,200,100,
200,20)
Petunjuk:Lihat Metode quadraticCurveTo()。Ia memiliki satu titik kontrol, bukan dua.
Contoh
Menggambar garis Bezier tiga tingkat:
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();
Syarat
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| cp1x | Koordinat x titik kontrol Bezier pertama. |
| cp1y | Koordinat y titik kontrol Bezier pertama. |
| cp2x | Koordinat x titik kontrol Bezier kedua. |
| cp2y | Koordinat y titik kontrol Bezier kedua. |
| x | Koordinat x akhir titik. |
| y | Koordinat y akhir titik. |
Dukungan browser
Tabel yang berisi angka menunjukkan versi browser yang pertama yang mendukung sifat ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Perhatian: Versi Internet Explorer 8 dan yang sebelumnya tidak mendukung elemen <canvas>.
