Komentar: Artikel ini akan berbicara tentang metode menggambar persegi panjang dan lingkaran di kanvas, mereka milik grafik dasar. Tentu saja, ada lebih dari sekedar mereka dalam grafik dasar, tetapi di kanvas, hanya menggambar persegi panjang dan lingkaran tidak memerlukan metode lain untuk disimulasikan. Teman yang tertarik dapat mempelajarinya
Artikel ini akan berbicara tentang metode menggambar persegi panjang dan lingkaran di kanvas, mereka termasuk grafik dasar. Tentu saja, ada lebih dari sekedar mereka dalam grafik dasar, tetapi di kanvas, hanya menggambar persegi panjang dan lingkaran tidak memerlukan simulasi lain.Kanvas menggambar persegi panjang
1. Fillrect dan Strokerect
Fillrect dapat secara langsung mengisi persegi panjang, dan gaya pengisian adalah gaya yang sedang Anda tentukan; Demikian pula, Strokerect adalah untuk langsung membelai persegi panjang
Parameternya konsisten, pada gilirannya (titik awal koordinat x, titik awal y, lebar persegi panjang, tinggi persegi panjang). Titik awal di sini, perhatikan, mengacu pada titik di sudut kiri atas persegi panjang.
Kami biasanya menggunakannya untuk melakukan hal -hal sederhana, dan mereka hanya dapat melakukan hal -hal sederhana. Mengapa? Karena kata -kata yang grafik yang mereka gambar tidak memiliki jalan, mereka keluar secara langsung.
Misalnya, jika Anda pertama kali mengisi persegi panjang dengan Fillrect, maka Anda ingin membelai persegi panjang. Jika Anda menggunakan stroke (), tidak akan ada efek, karena meskipun ada persegi panjang saat ini, tidak ada jalan.
Jika Anda ingin membelai persegi panjang ini, Anda dapat menggunakan strokerect () untuk membelai persegi panjang pada posisi yang sama - tetapi mereka sebenarnya independen, hanya posisi yang tumpang tindih.
ctx.fillrect (200.100,50,40);
CTX.Strokerect (200.100,50,40);
Jika kita menginginkan persegi panjang yang diisi dan dibelai, tidak diragukan lagi akan rumit untuk menggunakan Fillrect dan Strokerect pada saat yang sama. Jadi dalam hal ini kami biasanya menggunakan metode berikut.
2, Rect
Parameter Rect tidak berbeda dengan Fillrect dan Strokerect. Perbedaannya adalah bahwa mereka hanya menggambar jalan setapak, dan Anda harus menyelesaikan stroke atau mengisi diri Anda nanti.
CTX.Rect (300.100,50,40);
ctx.stroke ()
ctx.fill ();
Apa manfaat dari melakukan ini? Dalam artikel sebelumnya, saya menyebutkan bahwa pengisian atau stroke mengkonsumsi banyak sumber daya, jadi kita sering (seperti loop) perlu menarik ratusan jalur sekaligus, dan kemudian stroke atau mengisi. Pada saat ini, gunakan Rect untuk menggambar jalan setapak dan kemudian mengisinya lagi, yang menghindari masalah Fillingrect dan Strokerec Filling atau Stroke setiap saat.
3. Lineto
Tentu saja, Anda juga dapat menggunakan 4 linesto menggambar persegi panjang seperti tutorial gambar saya. Tapi ini tidak perlu, silakan lihat artikel itu untuk detailnya.
Lingkaran Draw Canvas
Langit tidak memiliki mata. Faktanya, kanvas tidak memiliki fungsi nyata yang dapat secara langsung menarik lingkaran. Apa yang dia gambar sebenarnya adalah busur 360 derajat, yang terlihat seperti lingkaran.
Kami telah menyebutkan fungsi kanvas untuk menggambar busur sebelumnya, yaitu busur. Kami menggunakannya untuk menggambar lingkaran:
ctx.arc (300+25.100+20,20,0, Math.pi*2);
ctx.stroke ()
ctx.fill ();
Busur ini sama dengan Rect, dan jalurnya ditarik, dan pengisian atau stroke perlu diselesaikan nanti.
Tetapi harus dicatat bahwa penilaian posisi lingkaran berbeda dari persegi panjang. Kami menentukan posisinya dengan sudut kiri atas persegi panjang sebagai titik awal, tetapi kami biasanya menentukan posisi lingkaran dengan pusat lingkaran.
Jika Anda ingin menggambar satu set persegi panjang dan lingkaran yang terpusat secara horizontal dan vertikal, maka Anda harus ingat untuk tidak menganggap titik awal persegi panjang sebagai titik awal lingkaran - titik awal lingkaran adalah pusat lingkaran!
Lupakan, saya akan memberi Anda formula sekarang, lingkaran dan persegi panjang yang selaras, koordinat pusat lingkaran = koordinat persegi panjang + setengah dari lebar dan tinggi persegi panjang.
Artinya, pusat lingkaran x = persegi panjang x + lebar persegi panjang/2, dan lingkaran y = persegi panjang y + ketinggian persegi panjang/2. Dengan cara ini mereka benar -benar selaras.
Meskipun busur tidak semudah digunakan sebagai metode lingkaran menggambar secara langsung - metode lingkaran menarik secara langsung yang saya bayangkan hanya membutuhkan 3 parameter, yaitu koordinat tengah, yaitu, jari -jari - tetapi busur tidak hanya dapat menggambar lingkaran, tetapi juga menggambar setengah lingkaran, sehingga lebih kuat dan dapat digunakan.
Karena ada lingkaran, harus ada elips, tetapi bahkan tidak ada fungsi reguler untuk menarik lingkaran di kanvas, apalagi elips. Oleh karena itu, menggambar elips harus disimulasikan menggunakan metode lain. Ini cukup rumit, jadi saya akan menyerahkannya ke langkah berikutnya.