Cara membuat bentuk dengan kanvas HTML

Jadual Kandungan

1. Pengenalan
2. Bermula
3. Melukis Bentuk
4. Kesimpulan

✍️ Pengenalan

HTML elemen digunakan dalam mencipta kandungan yang merangkumi grafik. Ini memberi peluang kepada pembangun untuk melukis bentuk, teks dan bentuk termasuk gaya dan animasi.

✨ Bermula dengan Kanvas

Dalam mencipta bentuk dengan HTML , terdapat beberapa petua untuk disediakan

• 1. Menambah elemen ke halaman HTML untuk menentukan penggunaannya, dalam teg kanvas termasuk atribut identiti(id) yang akan dikawal secara dinamik oleh Javascript. Anda juga harus menetapkan lebar dan ketinggian untuk menentukan saiz elemen kanvas

• 2. Memanipulasi elemen dengan JavaScript dengan mendapatkan semula elemen menggunakan ID dan berikan kepada kanvas malar. Kaedah getContext("2d") menjadikan kanvas untuk dipaparkan sebagai teks, bentuk atau imej.

✏️ Melukis Bentuk

? Segi empat tepat

Kaedah ini boleh digunakan untuk mencipta segi empat tepat dengan x = koordinat x segi empat tepat, y = koordinat y segi empat tepat, lebar = lebar segi empat tepat dan tinggi segi empat tepat.

• fillRect(x, y, lebar, tinggi) Kaedah ini mencipta segi empat tepat yang diisi dengan gaya isian untuk memberikannya warna tertentu.

• strokeRect(x, y, lebar, tinggi) Kaedah ini mencipta garisan segi empat tepat atau segi empat tepat dengan lejang, gaya lejang boleh digunakan untuk menambah warna padanya.

• clearRect(x, y, lebar, tinggi) Kaedah ini mencipta segi empat tepat lutsinar tetapi anda perlu menentukan lebar dan ketinggian kanvas yang diisi dengan nama warna supaya segi empat tepat lutsinar itu boleh memaparkan

? Segi empat

Kaedah untuk mencipta segi empat sama seperti segi empat tepat, perbezaannya ialah nilai lebar yang sama dengan ketinggian tidak seperti segi empat tepat.

? Segi tiga

Kaedah ini boleh digunakan untuk mencipta segi tiga.

-beginPath(): Kaedah ini adalah untuk memulakan laluan baharu untuk lukisan.
-moveTo(x, y): Kaedah ini membantu untuk menggerakkan pen pada bucu pertama segi tiga
-lineTo(x, y): Kaedah ini melukis bucu bawah segi tiga.

⚪️ Bulatan

Kaedah berikut digunakan dalam mencipta bulatan:

• beginPath(): kaedah ini untuk memulakan laluan.
• arc(x, y, radius, startAngle, endAngle, anticlockwise): ini adalah untuk membuat bulatan di mana x dan y adalah untuk koordinat pusat pusat, jejari ialah jejari bulatan, StartAngle dan endAngle yang merupakan sudut untuk bulatan.
• Math.PI- Ini digunakan dalam membuat separuh bulatan sambil mendarab ini dengan 2 akan memberikan bulatan penuh

? Elips

Bentuk ini menggunakan jenis kaedah yang sama tetapi menggunakan;

-elips(x, y, jejariX, jejariY, putaran, Sudut mula, Sudut hujung, lawan jam): di mana
-x dan y ialah koordinat pusat elips,
-radiusX dan radiusY ialah jejari mengufuk dan menegak bagi
elips,
-putaran memaparkan putaran elips dalam radian,
-startAngle dan endAngle menunjukkan sudut mula dan akhir untuk
lukisan, dalam radian dan
-lawan arah jam iaitu pilihan dengan nilai benar atau salah
(lalai adalah palsu).

? segi empat selari

Bentuk ini menggunakan kaedah berikut;

• beginPath untuk memulakan laluan lukisan baharu dan moveTo(x, y) untuk menetapkan sudut pertama kerana bentuk mempunyai 4 sisi dengan 4 penjuru.
• lineTo untuk melukis garisan yang akan menyambungkannya kerana terdapat 4 sisi.

? Trapezium

Bentuk ini agak serupa dengan segi empat selari, mereka menggunakan kaedah yang sama dalam melukisnya. Satu-satunya yang berbeza tentang mereka ialah nilai koordinat.

? Kon

Bentuk ini menggabungkan kaedah melukis segi tiga dengan kaedah separuh bulatan.

? Poligon

Untuk mencipta poligon, anda perlu menentukan sisi bentuk kerana terdapat bilangan sisi yang berbeza.

Kaedah berikut digunakan dalam mencipta poligon:

• beginPath(): kaedah ini adalah untuk mencipta bentuk baharu.
• closePath(): kaedah ini adalah untuk menamatkan bentuk.
• cx: nilainya untuk pusat koordinat x.
• cy: nilainya menentukan pusat untuk koordinat y.
• jejari: jejari bentuk.

Untuk mendapatkan sudut, anda perlu mengira dengan formula ini dengan membahagikan bulatan kepada dua;

angle = 2π/ n

• pentagon

• heksagon
  

• heptagon

• oktagon

• nonagon

• dekagon

Kesimpulan

Akhirnya, kita telah sampai ke penghujung artikel ini. Bentuk yang kami cipta mempunyai beberapa siri kaedah dalam melukisnya.

Terima kasih kerana membaca. Berhubung dengan saya di
Linkedin

X

Atas ialah kandungan terperinci Cara membuat bentuk dengan kanvas HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!