Metode bezierCurveTo() HTML canvas
Definisi dan penggunaan
bezierCurveTo() metode untuk menambah titik ke laluan semasa dengan menggunakan titik kawalan yang ditentukan untuk garis kereta beraturan tiga kali.
Petunjuk:Garis kereta beraturan tiga kali memerlukan tiga titik. Dua titik pertama adalah titik kawalan untuk kiraan kereta beraturan tiga kali, dan titik ketiga adalah titik akhir garis. Titik awal garis adalah titik terakhir dalam laluan. Jika laluan tidak wujud, sila gunakan beginPath() dan moveTo() metode untuk menentukan titik awal.
- Titik awal: moveTo(
20,20) - Titik kawalan 1: bezierCurveTo(
20,100,200,100,200,20) - Titik kawalan 2: bezierCurveTo(20,100,
200,100,200,20) - Titik akhir: bezierCurveTo(20,100,200,100,
200,20)
Petunjuk:Lihat Metode quadraticCurveTo()。 ia mempunyai titik kawalan, bukan dua.
Contoh
Lukis garis kereta beraturan 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 | Penerangan |
|---|---|
| cp1x | Kordinat x titik kontrol Bézier pertama. |
| cp1y | Kordinat y titik kontrol Bézier pertama. |
| cp2x | Kordinat x titik kontrol Bézier kedua. |
| cp2y | Kordinat y titik kontrol Bézier kedua. |
| x | Kordinat x titik akhir. |
| y | Kordinat y titik akhir. |
Dukungan Browser
Angka dalam tabel menunjukkan versi paling awal penggunaan browser yang mendukung sifat ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komen:Internet Explorer 8 dan versi yang lebih awal tidak mendukung elemen <canvas>.
