Metode HTML canvas bezierCurveTo()
Definisi dan penggunaan
bezierCurveTo() metode untuk menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol yang ditentukan untuk garis Belzier tiga kali.
Petunjuk:Belzier tiga kali memerlukan tiga titik. Dua titik pertama digunakan sebagai titik kontrol dalam perhitungan Belzier, titik ketiga adalah titik akhir garis. Titik awal garis adalah titik terakhir di jalur saat ini. Jika jalur tidak ada, gunakan beginPath() dan moveTo() metode untuk menentukan 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()。Memiliki titik kontrol satu, bukan dua.
Contoh
Menggambar garis Belzier tiga kali:
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();
Sintaks
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| cp1x | Kordinat x kontrol perebutan pertama. |
| cp1y | Kordinat y kontrol perebutan pertama. |
| cp2x | Kordinat x kontrol perebutan kedua. |
| cp2y | Kordinat y kontrol perebutan kedua. |
| x | Kordinat x akhir titik. |
| y | Kordinat y akhir titik. |
Dukungan peramban
Angka di tabel menunjukkan versi peramban pertama yang mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Peramban Internet Explorer 8 dan yang lebih awal tidak mendukung elemen <canvas>.
