Komentar: Arc, Arcto dan Quadratcurveto. Mereka semua memiliki satu kesamaan, yaitu, kurva yang mereka gambar hanya bisa bias di satu sisi. Perbedaan terbesar antara beziercurveto yang disebutkan hari ini dan mereka adalah dua titik kontrol, yaitu, kurva berbentuk S dapat ditarik. Teman yang tertarik dapat mempelajarinya.
Dalam artikel sebelumnya, saya telah berbicara tentang tiga cara untuk menggambar kurva di kanvas: busur, arcto dan quadratcurveto. Mereka semua memiliki satu kesamaan, yaitu, kurva yang mereka gambar hanya bisa bias di satu sisi. Perbedaan terbesar antara BezierCurveto yang disebutkan hari ini dan mereka adalah bahwa mereka memiliki dua titik kontrol, yaitu, mereka dapat menggambar kurva berbentuk S.BezierCurveto, yang disebut Kurva Bezier, jika Anda telah mempelajari beberapa alat menggambar, Anda dapat segera memahaminya.
Sintaks BezierCurveto adalah sebagai berikut:
ctx.beziercurveto (x1, y1, x2, y2, x, y); Saya akan menjelaskan parameternya seperti biasa. (x1, y1) adalah koordinat dari titik kontrol 1, (x2, y2) adalah koordinat titik kontrol 2, dan (x, y) adalah koordinat titik akhirnya. Seperti QuadratCurveto, koordinat titik awalnya juga telah ditentukan sebelumnya oleh Moveto.
Oleh karena itu, BezierCurveto menggambar kurva membutuhkan 4 poin: titik awal, titik akhir, titik kontrol 1, titik kontrol 2. Demi penjelasan selanjutnya, di sini saya berasumsi bahwa titik kontrol 1 sesuai dengan titik awal dan titik kontrol 2 sesuai dengan titik akhir
Di sini kita akan menyebutkan masalah lama dari gambar kanvas, yang berarti bahwa gambar kode semuanya didasarkan pada tebakan, dan Anda perlu menyegarkan gambar untuk memahami di mana Anda menggambarnya.
Saya akan melanjutkan tradisi bagus sebelumnya dan menggambar beberapa jalur tambahan untuk membantu semua orang memahami:
var x1 = 450, // koordinat x titik kontrol 1
y1 = 300, // y titik kontrol 1
x2 = 450, // x titik kontrol 2
y2 = 500, // y titik kontrol 2
x = 300, // titik akhir x
y = 500; // titik akhir y
ctx.moveto (300.300); // titik mulai
ctx.beginpath ();
ctx.linewidth = 5;
ctx.strokestyle = "rgba (0,0,0,1)"
ctx.moveto (300.300);
ctx.beziercurveto (x1, y1, x2, y2, x, y);
ctx.stroke ();
// Mulailah menggambar garis tambahan
ctx.beginpath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.linewidth = 1;
// Sambungkan titik awal dan titik kontrol 1
ctx.moveto (300.300);
ctx.lineto (x1, y1);
// Hubungkan titik akhir dan titik kontrol 2
ctx.moveto (x2, y2);
ctx.lineto (x, y);
// Sambungkan titik awal dan akhir (baseline)
ctx.moveto (300.300);
ctx.lineto (x, y);
ctx.stroke ();
Di sini saya pertama kali menggambar kurva yang mirip dengan QuadratCurveto, yang hanya bias ke satu sisi. Garis ini tampaknya relatif bulat karena koordinat x titik kontrol 1 dan 2 adalah sama.
Sekarang gambar kurva berbentuk S untuk membuktikan bahwa beziercurveto unik:
var x1 = 150;
...
Faktanya, cukup ubah koordinat titik kontrol 1. Jika koordinat titik kontrol 1 dan titik kontrol 2 masing-masing berada di kedua sisi baseline, kurva berbentuk S ditarik; Jika keduanya berada di satu sisi baseline, itu adalah efek yang mirip dengan Quadratcurveto.
Situasi contoh ini relatif sederhana. Baseline (titik awal ke titik akhir) adalah vertikal, tetapi sebagian besar waktu dalam aplikasi yang sebenarnya, baseline kami miring, sehingga situasinya jauh lebih rumit. Tapi mari kita coba sendiri
Setiap metode menggambar terlihat relatif tunggal dalam fungsi, tetapi metode yang kuat dikombinasikan dengan metode tunggal. Dalam artikel berikutnya, saya mencoba menjelaskan beberapa metode menggambar umum, seperti persegi panjang dan elips bulat. Mereka perlu menggabungkan metode tunggal ini di masa lalu.