Mari kita terus berbicara tentang metode menggambar kurva di kanvas. Hari ini saya akan berbicara tentang Quadratcurveto.
Sejujurnya, metode ini agak menakutkan, Anda dapat mengalaminya dari nama fungsi. Ngomong -ngomong, saya pikir perlu untuk mempersingkat nama fungsi ini.
Kuadrat berarti kuadratik, yaitu persamaan kuadratik kuadrat dalam matematika. Parameter ctx.quadraticCurveto adalah sebagai berikut:
ctx.quadratcurveto (x1, y1, x, y);
Di mana x dan y adalah koordinat titik akhir, dan x1 dan y1 adalah koordinat titik kontrol kurva? Apa? Anda bertanya di mana titik awalnya? Titik awal ditentukan menggunakan Moveto sebelum ini.
Alasan mengapa saya menempatkan koordinat titik kontrol dengan serial nomor 1 adalah karena fungsi kurva menggambar yang disebutkan kemudian memiliki dua titik kontrol, yaitu x2 dan y2, jadi saya akan memberikan vaksinasi di sini terlebih dahulu.
Titik awal yang ditentukan oleh Moveto dan titik akhir yang ditentukan oleh QuadratCurveto sendiri dapat dihubungkan ke garis lurus. Karena QuadratCurveto hanya memiliki satu titik kontrol, titik kontrol ini berada di sisi kiri garis atau di sisi kanan garis, sehingga QuadratCurveto hanya dapat menggambar busur, tetapi masih tidak dapat menggambar garis berbentuk S.
Demi pemahaman yang mudah, saya akan terus menggunakan metode menggambar garis tambahan di artikel sebelumnya. Kode awal adalah sebagai berikut:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.beginpath ();
ctx.strokestyle = "#000";
ctx.moveto (300.300); // Mulai Titik
ctx.quadratcurveto (x1, y1, x, y); // kurva nyata
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "rgba (255,0,0,0,5)";
ctx.moveto (300.300);
ctx.lineto (x1, y1); // baris ini dan baris berikutnya adalah garis yang menggambar titik kontrol
ctx.lineto (x, y);
ctx.moveto (300.300); // titik awal dan akhir dari kurva awal dan titik akhir
ctx.lineto (x, y);
ctx.stroke ();
Di sini saya telah menggambar dua garis tambahan, satu adalah garis koneksi antara titik awal dan titik akhir, dan yang lainnya adalah garis tambahan antara titik awal dan titik kontrol dan kemudian ke titik akhir (sebenarnya dua). Persimpangan dari kedua garis ini adalah koordinat titik kontrol Quadratcurveto.
Quadratcurveto hanya dapat menggambar kurva di busur, tetapi busur ini bisa sangat tidak teratur, yang juga merupakan peningkatan dibandingkan dengan ARC dan ARCTO.
Selain itu, QuadratCurveto tidak akan memiliki pembalikan seperti Arcto.
Tentu saja, jika Anda menarik titik kontrol sangat jauh, grafik mungkin menjadi tidak dapat dikenali oleh Anda. Ayo coba:
y1 = 950;
Saya baru saja mengubah Y1 sedikit lebih besar, dan kurva melampaui kisaran kanvas.
Namun, kisaran kurva yang ditarik oleh Quadratcurveto tidak pernah dapat mencapai atau melampaui koordinat titik kontrol. Kami hanya perlu mengontrol titik kontrol dengan baik, jadi kami tidak perlu khawatir.
Saya menulis halaman contoh bergerak sederhana yang menunjukkan proses menggambar kurva di QuadratCurveto, berharap dapat membantu Anda memperdalam pemahaman Anda:
Harap lebih inklusif jika kode ditulis jelek.