Dalam artikel di Canvas Drawing Lines, saya berbicara tentang metode menggambar garis lurus. Artikel tentang kurva menggambar ini seharusnya sudah diterbitkan sejak lama, tetapi karena kurva menggambar kanvas cukup istimewa, saya belum mengetahuinya, jadi saya harus mencobanya langkah demi langkah.
Salah satu kesulitan dalam menggambar kurva di kanvas adalah memiliki 4 fungsi kurva! Mereka adalah Arc, Arcto, Quadrat Curveto, BezierCurveto. Biarkan saya mulai dengan metode busur paling sederhana.
Fungsi busur adalah untuk menggambar busur biasa, yang dapat berupa lingkaran lengkap atau busur lingkaran tertentu.
Sintaks busur adalah sebagai berikut :Context.arc (x, y, radius, startangle, endangle, berlawanan arah jarum jam)
Saya akan menjelaskan parameternya, yaitu
busur (tengah x, tengah y, jari -jari, sudut awal, sudut akhir, atau apakah itu berlawanan arah jarum jam)
Apa yang harus kita lakukan jika kita menggambar lingkaran lengkap dengan busur? Semua orang memperhatikan bahwa ada sudut awal dan sudut ujung dalam parameter. Jika sudut awal kami adalah 0 dan sudut ujungnya adalah 360, bukankah itu lingkaran yang sempurna?
Solusi yang benar! Tetapi harus dicatat bahwa sudut di sini diwakili oleh radian (dan begitu pula flash). Lingkaran lengkap adalah 360 derajat, yang merupakan radian 2pi.
Jadi kami menulis ini :ctx.arc (400.400,20,0, Math.pi*2);
ctx.fill ();
ctx.stroke ();
Seperti Lineto, ARC juga merupakan jalan untuk menggambar, jadi kita harus memanggil metode pengisian atau stroke di belakangnya untuk menunjukkan gambar (strokestyle merah dan gaya pengisian merah tembus digunakan pada gambar).
Sekarang mari kita gambar 1/4 lingkaran, sudutnya 90 derajat. Seperti yang disebutkan sebelumnya, sudut 360 derajat adalah radian 2pi, maka sudut 10 derajat adalah 2pi/360 = pi/180 radian, maka 90 derajat adalah 2pi/360*90 = pi/2 radian (harap hitung sudut lain sendiri).
ctx.arc (400.400,20,0, Math.pi*2/4);
Dari gambar tersebut, kita dapat menentukan bahwa derajat 0 derajat adalah 0 derajat yang umum digunakan dalam matematika, tetapi sudut dibuka searah jarum jam secara default, yang berlawanan dengan model matematika (terkait dengan koordinat, karena koordinat kanvas juga berlawanan dengan koordinat matematika).
Tetapi bukankah ada parameter di depannya yang menentukan apakah itu berlawanan arah jarum jam? Bagaimana kalau kita mengaturnya?
ctx.arc (400.400,20,0, math.pi*2/4, true);
Anda akan melihat bahwa sudut menjadi berlawanan arah jarum jam, menyebabkan busur menjadi 360-90 = 270 derajat.
Tetapi! Satu hal yang harus Anda perhatikan adalah bahwa metode perhitungan dari titik awal dan titik akhir selalu didasarkan pada 0 derajat dan meluas searah jarum jam, dan tidak ada yang mengatakan bahwa Cisco dan yang sebaliknya adalah benar. Berwajahnya hanyalah arah busur.
Ini tidak hanya mencegah kebingungan dari bolak -balik, tetapi juga membuatnya lebih mudah untuk dihitung.
Namun, penggunaan fleksibel berlawanan arah jarum jam kadang -kadang berguna.
Dalam contoh di atas, sudut awal kami adalah 0. Sekarang mari kita coba sudut awal lainnya, seperti 90 derajat.
ctx.arc (400.400,20, Math.pi*2/4, Math.pi*2+Math.pi);
Jika titik awal kami adalah 90 derajat dan titik akhir adalah 90 derajat, maka hasilnya adalah tidak ada yang bisa ditarik, jadi saya mengubah sudut titik akhir menjadi 180 derajat dan akhirnya mendapatkan gambar pada gambar di bawah ini.
PERTANYAAN : Jika kita menggambar lingkaran lengkap dari titik awal non-0 derajat, apakah tidak apa-apa? Tentu saja, itu juga mungkin, selama Anda mengatur titik akhir busur ke 360 derajat + sudut awal, seperti:ctx.arc (400.400,20, Math.pi*2/4, Math.pi*2+Math.pi*2/4); // Titik awalnya adalah 90 derajat, titik akhirnya adalah 360+90 derajat
Namun, pendekatan ini murni masalah menemukan masalah tanpa masalah, dan orang normal tidak akan menggunakannya.
Ringkasan : Metode busur Canvas adalah menggambar busur biasa, dan Anda hanya dapat menggambar busur biasa, dan Anda tidak dapat menggambar busur aneh lainnya, seperti berbentuk S-meskipun saya paling suka S berbentuk S.