Kali ini emolga akan mengenalkan suatu teknologi yang sangat keren dan powerfullll.....
HTML5, sedikit tentang teknologi ini...
HTML5 adalah generasi paling anyar dari generasi-generasi HTML lainnya bahkan terdengar kabar bahwa ini adalah versi terakhir...
bahasa pemograman yang dipakai oleh HTML5 itu sendiri tidak jauh beda dengan versi sebelumnya, namun jika kita familiar dengan tag <div> maka di HTML5 ini akan sangat jarang sekali menemukan tag tersebut, karena tag itu akan digantikan langsung oleh tag-tag seperti <nav> <header> <footer> dan lain sebagainya..
wah jadi tidak terlalu ribet buat baca scriptnya lagi kan...
udah yah ngebahas tentang HTML5nya, emolga tuh mau fokus ngebahas tentang tag yang paling sakral di HTML5 ini yaitu tag <canvas> ...
apa itu canvas??
tag HTML <canvas> ini adalah elemen yang ditampilkan sebagai objek persegi panjang pada halaman web yang warnanya bisa kita atur...
contoh tampilan <canvas>
kenapa emolga fokus ke tag ini?? soalnya tag ini yang akan membantu kita kedepannya, karena kita akan membuat sebuah game dari HTML5....
ini dia alasan kenapa harus <canvas> ??
<canvas> elemen sangat cocok untuk membuat game di HTML.
<canvas> elemen menawarkan semua fungsi yang Anda butuhkan untuk membuat game.
Gunakan JavaScript untuk menggambar, menulis, menyisipkan gambar, dan banyak lagi, ke <canvas>.
tag elemen <canvas> memiliki built-in objek, yang disebut getContext ("2d") objek, dengan metode dan properti untuk menggambar.
kita coba langsung membuat nya yah, mari kita nyalakan....
langsung aja ketikan perintah ini di editor kesayangan kalian.. :D
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
//Untuk css atau tampilan
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
//memulai menjalankan perintah canvas
<body onload="startGame()">
//Untuk Scripy pembuatan Canvas
<script>
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
</script>
</body>
</html>
Conversion Conversion Emoticon Emoticon