Metode HTML canvas quadraticCurveTo()
Definisi dan penggunaan
quadraticCurveTo() metode untuk menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol yang menandai garis quadratic Bezier.
Petunjuk:Garis quadratic Bezier memerlukan 2 titik. Titik pertama adalah titik kontrol yang digunakan dalam perhitungan quadratic Bezier, dan titik kedua adalah titik akhir kurva. Titik awal kurva 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: quadraticCurveTo(
20,100,200,20) - Titik akhir: quadraticCurveTo(20,100,
200,20)
Petunjuk:Lihat Metode bezierCurveTo()。Ia memiliki 2 titik kontrol, bukan satu.
Contoh
Menyambungkan garis quadratic Bezier:
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 Bézier. |
| cpy | Koordinat y titik kontrol Bézier. |
| x | Koordinat x titik akhir. |
| y | Koordinat y titik akhir. |
Dukungan Peramban
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.
| 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 versi sebelumnya tidak mendukung elemen <canvas>.
