masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > Kanvas HTML5 - lukis segi empat tepat dan segi tiga contoh kod_html5 kemahiran tutorial

Kanvas HTML5 - lukis segi empat tepat dan segi tiga contoh kod_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:49:34
asal
1909 orang telah melayarinya

Pertama, letakkan elemen kanvas dalam halaman html, di mana elemen kanvas harus mempunyai tiga atribut: ID, lebar dan ketinggian.

Salin kod
Kod adalah seperti berikut:



Dapatkan objek kanvas dan dapatkan konteks var cxt=document.getElementById('demo').getContext( "2d"); Parameter 2d ditentukan.

Mula melukis Ada dua borang, satu isi dan satu lagi sapuan.

Kod javascript:

Salin kod
Kod tersebut adalah seperti berikut:




Rendering:

Label berkaitan：
canvas segi tiga segi empat tepat
sumber：php.cn
Artikel sebelumnya：Komponen HTML5 Kanvas merealisasikan skala kelabu imej Artikel seterusnya：Pengenalan kepada cara menggunakan HTML5 untuk membuat kemahiran tutorial papan lukisan_html5
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Dapatkan *dua* nilai ketinggian kanvas? Saya cuba mendapatkan dua nilai ketinggian kanvas ini. <canvaswidth="886"heig...
daripada 2024-04-05 09:32:33
0
1
1360
Bagaimana untuk mengeksport jpg daripada berbilang kanvas Saya mempunyai berbilang kanvas yang digunakan sebagai lapisan. canvasc1=backgroundimage.c...
daripada 2024-04-03 21:02:43
0
1
319
Mengapa setiap kali saya menyimpan projek Vite React saya, elemen kanvas baharu ditambahkan pada isi halaman dan bukannya menggantikan elemen kanvas sedia ada? Saya cuba mula belajar ThreeJs (saya juga baru dalam pembangunan web Javascript). Selepas ...
daripada 2024-03-30 09:57:49
0
1
396
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan