Apa yang dapat Anda lakukan dengan kanvas html5?

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

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

2.  Pola Segi Enam Neon

Lampu dan partikel yang bersinar menelusuri pola sarang lebah heksagonal ini

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

3.  Bayangan Panjang

Mensimulasikan sumber cahaya bergerak di antara kotak

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

4.  Latar Belakang Partikel Animasi

Jaringan kosmik node dan garis, dengan animasi dan efek lampu sorot

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

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

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

7.  Pita Berwarna-warni

Saksikan pita cahaya warna-warni ini memenuhi layar

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

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

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

10.  Teks Pergeseran Bentuk

Lihat yang ini dalam mode layar penuh. Ketik teks dan lihat itu muncul dalam efek partikel yang keren

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

11.  Konfeti Jatuh

Efek confetti yang cukup jatuh. Sempurna untuk latar belakang

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

12.  Parallax Skyline

Paralaks gulir samping minimalis. Yang ini akan sempurna untuk video game jadul

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

13.  Latar Belakang Sekitar

Bintik-bintik bokeh kabur berputar-putar. Lihat yang ini dalam mode satu halaman penuh untuk efek terbaik

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

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.   

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

16.  Rumput Mekanis

Perhatikan "rumput" tumbuh ke mana pun Anda menggerakkan mouse. Pastikan untuk melihat yang satu ini dalam layar penuh untuk melihat efeknya

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

17.  Bintang Interaktif

Saksikan bintang dan konstelasi muncul di langit malam saat Anda menggerakkan mouse

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

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

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

20.  Simulator Keramaian

Animasi lucu ini mensimulasikan kerumunan orang yang sibuk berjalan

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

21.  Burung Berbulu

Simulasi berkelompok animasi yang indah dan tenteram

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

22.  Petir

Hubungkan dua titik di mana saja di layar dan perhatikan busur listrik

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

23.  Abstraksi Kebisingan

Algoritme animasi unik untuk menghasilkan latar belakang abstrak yang bergaya dan penuh warna.  

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

24.  Lampu Cair

Layar penuh lampu berkedip animasi, mengingatkan pada klub malam atau konser

Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?
Apa yang dapat Anda lakukan dengan kanvas html5?

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

Apa gunanya kanvas HTML5?

Apa itu Kanvas HTML? . Elemen hanyalah wadah untuk grafis. Anda harus menggunakan JavaScript untuk benar-benar menggambar grafik. to draw graphics, on the fly, via JavaScript. The element is only a container for graphics. You must use JavaScript to actually draw the graphics.

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?