Elemen HTML5 memberi Anda cara yang mudah dan ampuh untuk menggambar grafik menggunakan JavaScript. Ini dapat digunakan untuk menggambar grafik, membuat komposisi foto atau membuat animasi sederhana (dan tidak terlalu sederhana).
Ini adalah elemen sederhana yang hanya memiliki dua lebar dan tinggi atribut khusus ditambah semua atribut inti HTML5 seperti id, nama dan kelas, dll
Anda dapat dengan mudah menemukan elemen itu di DOM menggunakan metode getElementById() sebagai berikut −
var canvas = document.getElementById("mycanvas"); _Mari kita lihat contoh sederhana dalam menggunakan elemen dalam dokumen HTML5
Ini akan menghasilkan hasil berikut -
Konteks Rendering
Ini awalnya kosong, dan untuk menampilkan sesuatu, skrip pertama-tama perlu mengakses konteks rendering dan menggambar di atasnya
Elemen kanvas memiliki metode DOM yang disebut getContext, yang digunakan untuk mendapatkan konteks rendering dan fungsi menggambarnya. Fungsi ini mengambil satu parameter, tipe context2d
Berikut ini adalah kode untuk mendapatkan konteks yang diperlukan bersama dengan tanda centang jika browser Anda mendukung elemen −
var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }Dukungan Peramban
Versi terbaru Firefox, Safari, Chrome, dan Opera semuanya mendukung HTML5 Canvas tetapi IE8 tidak mendukung kanvas secara native
Anda dapat menggunakan ExplorerCanvas untuk mendapatkan dukungan kanvas melalui Internet Explorer. Anda hanya perlu memasukkan JavaScript ini sebagai berikut –
HTML5 adalah hal yang dibicarakan akhir-akhir ini. Hari ini, kami memiliki koleksi eksperimen berbasis kanvas HTML5 yang sangat mengesankan yang akan membuat Anda berkata, "Wow. Mari kita intip beberapa contoh terbaru dan tercanggih di luar sana
Peringatan. Animasi dalam beberapa eksperimen kanvas ini berpotensi memicu kejang bagi penderita epilepsi fotosensitif. Kebijaksanaan pemirsa disarankan
Sebelum menjelajahi eksperimen ini, lihat template HTML5 dan skrip HTML5 kami, karena skrip atau tema berkualitas mungkin merupakan pilihan yang baik untuk proyek Anda berikutnya
Sekarang untuk percobaan
1. Jalur Orbit
Partikel pelangi berputar-putar indah
2. Pola Segi Enam Neon
Lampu dan partikel yang bersinar menelusuri pola sarang lebah heksagonal ini
3. Bayangan Panjang
Mensimulasikan sumber cahaya bergerak di antara kotak
4. Latar Belakang Partikel Animasi
Jaringan kosmik node dan garis, dengan animasi dan efek lampu sorot
5. Klik Tanggapan
Klik di manapun pada kanvas di bawah ini untuk melihat ledakan lingkaran yang lucu
6. Partikel Jantung
Awan besar jatuh hati bersinar
7. Pita Berwarna-warni
Saksikan pita cahaya warna-warni ini memenuhi layar
8. Menggambar Dengan Teks
Klik dan terus seret kanvas untuk menggambar dengan kata-kata acak
9. Memutar Spiral
Spiral 3D, dirender dengan garis. Anda bahkan dapat memutarnya dengan mouse
10. Teks Pergeseran Bentuk
Lihat yang ini dalam mode layar penuh. Ketik teks dan lihat itu muncul dalam efek partikel yang keren
11. Konfeti Jatuh
Efek confetti yang cukup jatuh. Sempurna untuk latar belakang
12. Parallax Skyline
Paralaks gulir samping minimalis. Yang ini akan sempurna untuk video game jadul
13. Latar Belakang Sekitar
Bintik-bintik bokeh kabur berputar-putar. Lihat yang ini dalam mode satu halaman penuh untuk efek terbaik
14. Fizzy Sparks
Arahkan mouse ke atas kanvas dan lihat percikan api berkilat di mana-mana
15. Anime. js Fireworks
Klik untuk efek kembang api yang sederhana, namun penuh gaya dan penuh warna.
16. Rumput Mekanis
Perhatikan "rumput" tumbuh ke mana pun Anda menggerakkan mouse. Pastikan untuk melihat yang satu ini dalam layar penuh untuk melihat efeknya
17. Bintang Interaktif
Saksikan bintang dan konstelasi muncul di langit malam saat Anda menggerakkan mouse
18. Titik Gravitasi
Klik di mana saja pada kanvas dan lihat semua partikel tertarik ke titik tersebut
19. Kawanan Partikel
Partikel simulasi berputar-putar dalam medan magnet simulasi
20. Simulator Keramaian
Animasi lucu ini mensimulasikan kerumunan orang yang sibuk berjalan
21. Burung Berbulu
Simulasi berkelompok animasi yang indah dan tenteram
22. Petir
Hubungkan dua titik di mana saja di layar dan perhatikan busur listrik
23. Abstraksi Kebisingan
Algoritme animasi unik untuk menghasilkan latar belakang abstrak yang bergaya dan penuh warna.
24. Lampu Cair
Layar penuh lampu berkedip animasi, mengingatkan pada klub malam atau konser
25. Rainbow Spider
Bisakah Anda bergerak cukup cepat untuk membuat laba-laba jatuh dari jaring?
Jadi apa yang Anda pikirkan?
Nah, sekarang Anda memiliki lebih dari satu alasan untuk membuat aplikasi HTML5. CodeCanyon memiliki kategori HTML5. Jelajahi dan lihat apa saja yang tersedia, atau lihat Template HTML5 kami di ThemeForest
Postingan ini telah diperbarui dengan kontribusi dari Monty Shokeen. Monty adalah full-stack developer yang juga suka menulis tutorial, dan belajar tentang pustaka JavaScript baru