Metode kanvas kuadratCurveTo() HTML
Contoh
Gambar kurva Bézier kuadrat:
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();
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode quadraticCurveTo() menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol tertentu yang mewakili kurva Bézier kuadrat.
Kurva Bézier kuadrat membutuhkan dua titik. Titik pertama adalah titik kontrol yang digunakan dalam perhitungan kuadrat Bézier dan titik kedua adalah titik akhir untuk kurva. Titik awal untuk kurva adalah titik terakhir di jalur saat ini. Jika jalur tidak ada, gunakan metode beginPath() dan moveTo() untuk menentukan titik awal.
Titik awal:
pindahKe( 20,20 )
Titik kontrol:
Kurva kuadratKe ( 20.100 , 200,20)
Titik akhir:
kuadratCurveTo (20,100, 200,20 )
Tip: Lihat metode bezierCurveTo() . Ini memiliki dua titik kontrol, bukan satu.
| Sintaks JavaScript: | konteks .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
Referensi Kanvas HTML