Metode Canvas quadraticCurveTo()
Definisi dan penggunaan
quadraticCurveTo() Metode untuk menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol yang ditunjukkan garis kurva Bezier.
Petunjuk:Garis kurva Bezier memerlukan 2 titik. Pertama adalah titik kontrol untuk perhitungan Bezier, kedua adalah titik akhir dari garis. Titik awal garis adalah titik terakhir di jalur saat ini. Jika jalur tidak ada, gunakan beginPath() dan moveTo() Metode untuk mendefinisikan titik awal.
- Titik awal: moveTo(
20,20) - Titik kontrol: quadraticCurveTo(
20,100,200,20) - Titik akhir: quadraticCurveTo(20,100,
200,20)
Petunjuk:Lihat Metode bezierCurveTo()。Itu memiliki 2 titik kontrol, bukan satu.
Contoh
Menggambar garis kurva Bezier kalian:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
Sintaks
context.quadraticCurveTo(cpx,cpy,x,y);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| cpx | Koordinat x titik kontrol Bezier. |
| cpy | Koordinat y titik kontrol Bezier. |
| x | Koordinat x titik akhir. |
| y | Koordinat y titik akhir. |
Dukungan peramban
Tabel angka menunjukkan versi peramban pertama yang mendukung properti ini penuh.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
