Metode bezierCurveTo() kanvas HTML
Contoh
Gambarkan kurva Bézier kubik:
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();
Dukungan Peramban
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung metode bezierCurveTo().
Definisi dan Penggunaan
Metode bezierCurveTo() menambahkan titik ke jalur saat ini dengan menggunakan titik kontrol tertentu yang mewakili kurva Bézier kubik.
Kurva kubik bezier membutuhkan tiga titik. Dua titik pertama adalah titik kontrol yang digunakan dalam perhitungan kubik Bézier dan titik terakhir 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 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 )
Tip: Lihat metode quadraticCurveTo() . Ini memiliki satu titik kontrol, bukan dua.
| Sintaks JavaScript: | konteks .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
Referensi Kanvas HTML