Belajar Dasar Canvas HTML 5 dan langkah

Halo teman – teman semua, apakabar..??

Kembali lagi di website tips dan trik Dumet School, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Belajar Dasar Canvas HTML 5. Apa itu canvas HTML 5 dan untuk apa canvas HTML 5 itu..?? Ya, canvas HTML 5 adalah sebuah tag html yang akan digunakan untuk memulai pembuatan sebuah game sederhana dengan HTML 5 dan di kombinasikan dengan Javascript native. Untuk teman – teman jika sudah memiliki pengetahuan tentang HTML namun ingin sekali bisa membuat game sederhana. Alangkah baiknya teman – teman pelajari canvas HTML, disamping itu teman – teman tanpa harus pindah bahasa pemograman untuk membuat game. Dengan basic HTML 5 teman – teman pun sudah bisa mulai mendalami membuat game dengan canvas HTML 5. Selain itu melatih teman – teman untuk pengetahuan Javascript native, karena dengan kita bisa menguasai Javascript kita bisa melakukan banyak hal. Banyak sekali pengembang menggunakan bahasa ini, bukan tidak mungkin teman – teman bisa memahami bahasa javascript yang dikembangkan, seperti jQuery, AngularJS, ReactJS native, dan lain sebagainya. Pada artikel Belajar Dasar Canvas HTML 5 ini kita akan praktek sedikit saja untuk pengetahuan dasar 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 Dasar 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 kita buat fungsi terlebih dahulu yang di berikan onload=”persegi()” dan kemudian didalamnya kita buat kotak persegi nya. Artinya perintah akan dijalankan di dalam tag body yang diberikan persegi()

Buat variable untuk menampung id pada tag canvas

var canvas = document.getElementById(‘segiEmpat’);

Kemudian kita buat kondisi, dimana jika browser support akan menampilkan kondisi benar atau true tetapi jika tidak akan menampilkan kondisi false.

Maka jika berhasil akan tampil seperti gambar di bawah ini

Hasil ini masih 2d belum 3d

Kotak berwarna orange type 2d nya, kotak berwarna merah adalah script dari hasil output persgi nya.

Mungkin sekian dulu pada artikel kali ini tentang Belajar Dasar Canvas HTML 5 kita lanjut pada artikel yang akan datang dan akan membahas lanjutan dari kanvas HTML 5.

Terimakasih dan sampai Jumpa, Semoga bermanfaat.

Belajar Dasar Canvas HTML 5

Kategori