html5 Tutorial lukisan kanvas (9)—Melukis segi empat tepat dan bulatan dalam kemahiran tutorial canvas_html5

Artikel ini bercakap tentang cara melukis segi empat tepat dan bulatan dalam kanvas. Ia adalah grafik asas. Sudah tentu, terdapat lebih banyak grafik asas daripada mereka, tetapi dalam kanvas, anda hanya boleh melukis segi empat tepat dan bulatan tanpa menggunakan kaedah lain untuk mensimulasikannya.

Kanvas melukis segi empat tepat
1, fillRect dan strokeRect
fillRect boleh terus mengisi segi empat tepat dan gaya isian ialah gaya yang anda tetapkan pada masa ini; yang sama Rasional untuk strokeRect adalah untuk terus membelah segi empat tepat
Parameternya adalah konsisten, mengikut urutan (titik permulaan x koordinat, titik permulaan y, lebar segi empat tepat, ketinggian segi empat tepat). Titik permulaan di sini, perhatikan, merujuk kepada sudut kiri atas segi empat tepat.
Kami biasanya menggunakannya untuk melakukan perkara yang mudah, dan mereka hanya boleh melakukan perkara yang mudah. kenapa? Kerana tiada "laluan" dalam grafik yang mereka lukis, ia hanya keluar secara langsung.
Sebagai contoh, jika anda mula-mula mengisi segi empat tepat dengan fillRect, dan kemudian anda mahu membelah segi empat tepat, jika anda menggunakan lejang(), ia tidak akan memberi kesan, kerana walaupun terdapat segi empat tepat, tiada laluan.
Jika anda terdesak mahu mengusap segi empat tepat ini, anda boleh menggunakan strokeRect() untuk mengusap segi empat tepat pada kedudukan yang sama - tetapi ia sebenarnya bebas, hanya kedudukan bertindih.

Salin kod

Kod tersebut adalah seperti berikut:

ctx.fillRect(200,100, 50,40 );
ctx.strokeRect(200,100,50,40); menyusahkan. Jadi dalam kes ini biasanya kita menggunakan kaedah berikut.

2, rect

Parameter rect tidak berbeza dengan fillRect dan strokeRect Bezanya ia hanya melukis laluan Bagi lejang atau pengisian, anda perlu selesaikan sendiri nanti.

Salin kod

Kod tersebut adalah seperti berikut:

ctx.rect(300,100, 50,40 );

ctx.stroke()

ctx.fill();


Apakah faedah melakukan ini? Saya menyebut dalam artikel sebelum ini bahawa mengisi atau mengusap menggunakan banyak sumber, jadi kita selalunya perlu melukis ratusan laluan sekaligus (seperti gelung) dan kemudian pukul atau mengisinya. Pada masa ini, gunakan rect untuk melukis laluan dan mengisinya pada penghujungnya, yang mengelakkan masalah fillRect dan strokeRec perlu mengisi atau stroke setiap kali.

3, lineTo

Sudah tentu anda juga boleh menggunakan 4 lineTo untuk melukis segi empat tepat seperti tutorial lukisan garisan saya. Tetapi ini tidak perlu, lihat artikel itu untuk butirannya.
Kanvas melukis bulatan

Tiada mata di langit sebenarnya, kanvas tidak mempunyai fungsi sebenar yang boleh melukis bulatan secara langsung Lengkok 360 darjah , ia kelihatan seperti bulatan. Kami telah bercakap tentang fungsi kanvas untuk melukis arka sebelum ini, iaitu arka Kami menggunakannya untuk melukis bulatan:

Salin kod

Kodnya adalah seperti berikut:

ctx.arc(300 25,100 20,20,0,Math.PI*2); >ctx. fill();

Arka ini sama dengan rect, ia juga melukis laluan, dan pengisian atau lejang perlu diselesaikan kemudian.
Tetapi perlu diingatkan bahawa pertimbangan kedudukan bulatan adalah berbeza daripada segi empat tepat. Kami menggunakan sudut kiri atas segi empat tepat sebagai titik permulaan untuk menentukan kedudukannya, tetapi kami biasanya menggunakan pusat bulatan untuk menentukan kedudukan bulatan.
Jika anda ingin melukis satu set segi empat tepat dan bulatan berpusat mendatar dan menegak, maka anda mesti ingat untuk tidak menganggap titik permulaan segi empat tepat sebagai titik permulaan bulatan - titik permulaan bulatan ialah pusat bulatan itu!

Lupakan, izinkan saya memberi anda formula semasa Untuk bulatan dan segi empat tepat yang dijajarkan, koordinat pusat bulatan = koordinat segi empat tepat dan separuh lebar dan tinggi segi empat tepat.
Iaitu, pusat bulatan x = segi empat tepat x lebar segiempat tepat/2, bulatan y = segi empat tepat y tinggi segiempat tepat/2. Dengan cara ini mereka benar-benar sejajar.
Walaupun arka tidak semudah cara melukis bulatan secara terus - kaedah yang saya bayangkan untuk melukis bulatan secara terus hanya memerlukan 3 parameter iaitu koordinat pusat bulatan dan jejari - tetapi arka boleh bukan sahaja melukis bulatan, tetapi juga separuh bulatan dan sebagainya, jadi fungsinya lebih berkuasa dan anda boleh melakukannya.
Memandangkan ada bulatan, sepatutnya ada elips, tetapi tidak ada fungsi biasa untuk melukis bulatan dalam kanvas, apatah lagi elips. Oleh itu, melukis elips mesti disimulasikan dengan kaedah lain Ini lebih rumit, jadi saya akan menyerahkannya kemudian.