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). Show
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 RenderingIni 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 PerambanVersi 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 OrbitPartikel pelangi berputar-putar indah 2. Pola Segi Enam NeonLampu dan partikel yang bersinar menelusuri pola sarang lebah heksagonal ini 3. Bayangan PanjangMensimulasikan sumber cahaya bergerak di antara kotak 4. Latar Belakang Partikel AnimasiJaringan kosmik node dan garis, dengan animasi dan efek lampu sorot 5. Klik TanggapanKlik di manapun pada kanvas di bawah ini untuk melihat ledakan lingkaran yang lucu 6. Partikel JantungAwan besar jatuh hati bersinar 7. Pita Berwarna-warniSaksikan pita cahaya warna-warni ini memenuhi layar 8. Menggambar Dengan TeksKlik dan terus seret kanvas untuk menggambar dengan kata-kata acak 9. Memutar SpiralSpiral 3D, dirender dengan garis. Anda bahkan dapat memutarnya dengan mouse 10. Teks Pergeseran BentukLihat yang ini dalam mode layar penuh. Ketik teks dan lihat itu muncul dalam efek partikel yang keren 11. Konfeti JatuhEfek confetti yang cukup jatuh. Sempurna untuk latar belakang 12. Parallax SkylineParalaks gulir samping minimalis. Yang ini akan sempurna untuk video game jadul 13. Latar Belakang SekitarBintik-bintik bokeh kabur berputar-putar. Lihat yang ini dalam mode satu halaman penuh untuk efek terbaik 14. Fizzy SparksArahkan mouse ke atas kanvas dan lihat percikan api berkilat di mana-mana 15. Anime. js FireworksKlik untuk efek kembang api yang sederhana, namun penuh gaya dan penuh warna. 16. Rumput MekanisPerhatikan "rumput" tumbuh ke mana pun Anda menggerakkan mouse. Pastikan untuk melihat yang satu ini dalam layar penuh untuk melihat efeknya 17. Bintang InteraktifSaksikan bintang dan konstelasi muncul di langit malam saat Anda menggerakkan mouse 18. Titik GravitasiKlik di mana saja pada kanvas dan lihat semua partikel tertarik ke titik tersebut 19. Kawanan PartikelPartikel simulasi berputar-putar dalam medan magnet simulasi 20. Simulator KeramaianAnimasi lucu ini mensimulasikan kerumunan orang yang sibuk berjalan 21. Burung BerbuluSimulasi berkelompok animasi yang indah dan tenteram 22. PetirHubungkan dua titik di mana saja di layar dan perhatikan busur listrik 23. Abstraksi KebisinganAlgoritme animasi unik untuk menghasilkan latar belakang abstrak yang bergaya dan penuh warna. 24. Lampu CairLayar penuh lampu berkedip animasi, mengingatkan pada klub malam atau konser 25. Rainbow SpiderBisakah 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 Apa gunanya kanvas HTML5?Apa itu Kanvas HTML? . Elemen to draw graphics, on the fly, via JavaScript. The
Mengapa kita perlu mempelajari kanvas HTML5?Elemen kanvas dalam HTML5 memungkinkan Anda membuat gambar dan animasi berbasis skrip dinamis yang luar biasa langsung di dalam laman web Anda . Menghidupkan JavaScript Anda dengan menggambar grafik bentuk bebas secara visual pada permukaan gambar. Kanvas adalah elemen yang kuat dengan banyak pilihan.
Apa keuntungan dari kanvas HTML?Kanvas HTML5. Kanvas memberi Anda, pengembang, kontrol yang lebih halus atas rendering tetapi harus dibayar karena harus mengelola setiap detail secara manual, seperti status melayang. Keuntungan terbesar kanvas justru kebalikan dari SVG. sangat bagus dalam mengelola banyak objek .
Apakah perlu mempelajari kanvas HTML?Tidak, ini benar-benar opsional . Kanvas tidak memberikan sesuatu yang penting bagi pengguna, itu hanya memungkinkan pembuatan efek yang sangat unik. Di mana saya harus mulai mempelajari pengembangan web? |