Belajar Dasar Canvas HTML 5
Halo teman – teman seluruh, apakabar..??
Kembali lagi di situs tips dan trik Source Code Aplikasi, di kesempatan kali ini saya akan memberikan tips dan trik mengenai Belajar Dasar Canvas HTML 5. Apa itu canvas HTML 5 dan bagi apa canvas HTML 5 itu..?? Ya, canvas HTML 5 yaitu sebuah tag html yang akan digunakan bagi memulai perancangan sebuah game sederhana dengan HTML 5 dan di kombinasikan dengan Javascript native. Bagi teman – teman bila telah mempunyai pengetahuan mengenai HTML namun ingin sekali dapat membangun game sederhana. Alangkah baiknya teman – teman pelajari canvas HTML, disamping itu teman – teman tanpa mesti pindah bahasa pemograman bagi membangun game. Dengan basic HTML 5 teman – teman pun telah dapat mulai mendalami membangun game dengan canvas HTML 5. Selain itu melatih teman – teman bagi pengetahuan Javascript native, karena dengan kita dapat menguasai Javascript kita dapat mengerjakan banyak hal. Banyak sekali pengembang menggunakan bahasa ini, bukan tak mungkin teman – teman dapat memahami bahasa javascript yang dikembangkan, seperti jQuery, AngularJS, ReactJS native, dan lain sebagainya. Di artikel Belajar Dasar Canvas HTML 5 ini kita akan praktek sedikit saja bagi pengetahuan mendasar nya. Kali ini kita akan menampilkan sebuah output kotak dengan Javascript, teman – teman siapkan text editornya dan ketikkan script html nya di bawah ini
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>Belajar Mendasar Canvas HTML 5</title>
<style type=text/css>
#segiEmpat{border:1px solid red;}
</style>
</head>
<body onload=persegi()>
<canvas id=segiEmpat></canvas>
</body>
</html>
Kemudian save dengan nama index.html, berikutnya kita berikan script JS nya, pertama-tama kita bikin manfaat terlebih dahulu yang di berikan onload=”persegi()” dan kemudian didalamnya kita bikin kotak persegi nya. Artinya command akan dijalankan di pada tag body yang diberikan persegi()
Bikin variable bagi menampung id di tag canvas
var canvas = document.getElementById(‘segiEmpat’);
Kemudian kita bikin kondisi, dimana bila browser support akan menampilkan kondisi benar atau true tetapi bila tak akan menampilkan kondisi false.
Karenanya bila berhasil akan tampil seperti gambar di bawah ini
Hasil ini masih 2d belum 3d
Kotak berwarna orange type 2d nya, kotak berwarna merah yaitu script dari hasil output persgi nya.
Mungkin demikianlah dulu di artikel kali ini mengenai Belajar Dasar Canvas HTML 5 kita lanjut di artikel yang akan datang dan akan membahas lanjutan dari kanvas HTML 5.
Terimakasih dan hingga Jumpa, Semoga bermanfaat.
Sumber https://kursuswebsite.org
