Menggambar Pesawat Tempur Dengan HTML5

hasilpesawat Menggambar Pesawat Tempur Dengan HTML5Pada tulisan kali ini saya akan mengajak anda untuk menggambar pesawat tempur menggunakan canvas pada HTML5. Langkah pertama kita akan berkenalan terlebih dahulu dengan canvas pada HTML5, dilanjutkan pengenalan syntax dasar javascript untuk menggambar pada canvas. Berikutnya kita akan memilih contoh pesawat, kemudian menentukan titik-titik koordinatnya. Selanjutnya dihubungkan tiap titiknya menggunakan Javascript.

Berkenalan Dengan Canvas

Canvas merupakan elemen baru pada HTML5 yang biasa digunakan untuk menggambar dengan menggunakan scripting(biasanya javascript). Biasanya juga digunakan untuk membuat grafik, membuat komposisi foto atau bahkan untuk membuat animasi dari mulai dasar hingga yang rumit.

Elemen canvas pada HTML5 sebenarnya bisa diibaratkan hanya menyediakan kertas untuk tempat menggambar, nah untuk menggambar sendiri, anda harus menggunakan scripting, misalnya Javascript. Jadi sebelum anda melanjutkan tutorial ini, setidaknya anda sudah memiliki dasar HTML dan Javascript.

Contoh penerapan Canvas

Mari kita lihat terlebih dahulu model penulisan elemen canvas

<canvas id="tutorial" width="150" height="150"></canvas>

Kalau kita perhatikan, sebenarnya mirip dengan elemen img, bedanya tanpa src. Elemen canvas secara default hanya memiliki 2 atribut yakni width and height. Apabila kita tidak menentukannya, maka secara default ukuran canvas yang akan dibuat adalah 300 pixel x 150 pixel. Sedangkan untuk atribut id, merupakan sebuah atribut yang hampir bisa dipakai disemua elemen HTML. Elemen id pada tutorial ini akan digunakan sebagai penanda yang akan dipanggil oleh javascript untuk menentukan canvas yang mana yang akan menjadi area untuk menggambar.

Pada tutorial ini, kita akan fokus menggambar obyek 2D, yakni dengan menentukannya dibagian awal. Sebenarnya canvas juga mendukung 3D, tapi masih dalam tahap percobaan dengan menggunakan library webGl. Berikut ini merupakan penentuan canvas mana yang akan menjadi obyek menggambar dan menentukan renderingnya dalam bentuk 2D

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

Pada skrip pertama kita akan menentukan canvas yang mana, selanjutnya kita akan menentukan konteks renderingnya yaitu 2 dimensi

Menggambar Sederhana

canvasgrid Menggambar Pesawat Tempur Dengan HTML5

resource: developer.mozilla.com

Sebelum kita mulai menggambar, kita perlu membahas terlebih dahulu terkait canvas grid atau ruang koordinat. Pada canvas HTML5, sumbu 0 terletak di pojok kiri atas dari area canvas yang anda buat. Sehingga semua elemen yang ditaruh pada canvas akan mengacu pada titik ini. Sehingga pojok kiri atasĀ  dari obyek kotak tersebut akan menjadi sumbu Y terhadap sisi atasnya dan menjadi sumbu x terhadap sisi kirinya.

Untuk menggambar obyek-obyek sederhana seperti kotak tersebut, html5 menyediakan script-script khusus, sehingga cukup dengan satu baris perintah, maka sebuah kotak bisa terbentuk. Silahkan anda pelajari tentang penggambaran obyek sederhana pada HTML5

Menggambar melalui path

Untuk membuat gambar dengan menggunakan path atau dengan istilah lain yakni menggambar dengan membuat garis-garis yang saling terhubung, kita memerlukan beberapa langkah, yakni

  • beginPath()
  • moveTo()
  • lineTo()
  • closePath()
  • stroke()
  • fill()

mari kita bahas satu persatu dari tiap langkah tersebut

beginPath

Perintah ini bisa diibaratkan kita akan memulai menggambar bentuk baru melalui path.

moveTo

moveto Menggambar Pesawat Tempur Dengan HTML5

sumber gambar: developer.mozilla.com

Merupakan salah satu perintah yang cukup penting, meskipun sebenarnya ia tidak berfungsi untuk menggambar. Bisa diibaratkan perintah ini berfungsi untuk mengangkat pena atau pensil yang sedang anda gunakan untuk menggambar menuju titik lain. Misalnya saat anda menggambar sebuah wajah, selesai anda menggambar obyek mata, maka anda akan mengangkat pensil anda untuk menggambar obyek lainnya, misalnya hidung. Nah seperti itulah fungsi perintah moveTo. Bisa dibayangkan kalau anda tidak mengangkat dan memindahkan pensil anda menuju titik lain, maka yang terjadi adalah akan munculnya coretan atau garis yang menghubungkan tiap-tiap obyek tadi. Seperti pada contoh di gambar.

bentuk penulisan perintah moveTo seperti di bawah ini

moveTo(x,y)

 

lineTo

Untuk menggambar garis lurus, kita menggunakan perintah lineTo

lineTo(x,y)

LineTo memerlukan dua sumbu yakni x dan y yang merupakan target dari dihubungkannya garis. Misalnya anda mengawali titik gambar anda dengan menggunakan moveTo(10,10), maka agar membentuk sebuah garis lurus anda bisa melanjutkannya dengan perintah lineTo(10,20). Untuk menghubungkan tiap-tiap titik koordinat yang anda buat, anda bisa menggunakan perintah ini.

closePath

Ini merupakan perintah optional. Saat perintah ini dituliskan, maka ia akan bertugas menghubungkan dari titik terakhir anda berada dengan titik awal dimana anda memulai jalur atau path anda.

stroke atau fill

Dengan memanggil salah satu dari kedua perintah tersebut, maka obyek yang anda buat akan digambar ke kanvas. Stroke bergungsi untuk memberi garis tepi pada obyek sedangkan fill berfungsi untuk mewarnai area obyek.

Mulai menggambar pesawat tempur

Kapan mulainya? setelah anda memahami dasar-dasar canvas diatas, baru kita bisa mulai untuk menggambar pesawat tempur.

Dalam tutorial ini, saya menggunakan sebuah gambar acuan untuk membuat pesawat. Karena akan terlalu susah kalau sekedar membayangkan bentuk pesawat dan membayangkan pula titik-titik koordinat yang akhirnya membentuk garis yang akhirnya juga menunjukkan bentuk pesawat.

airforcet Menggambar Pesawat Tempur Dengan HTML5Baik langkah pertama yang saya lakukan adalah menentukan obyek yang menjadi acuan saya, yakni pesawat tempur. Gambar pesawat ini saya peroleh dari images.google.com. Langkah berikutnya yang saya lakukan adalah menampilkan grid pada photoshop untuk memudahkan saya dalam membuat titik-titik koordinatnya

gridairforce Menggambar Pesawat Tempur Dengan HTML5

cara gampang menentukan titik koordinat pada gambar acuan

Anda bisa melanjutkan sendiri titik-titik koordinat selanjutnya. Nah setelah selesai, barulah buka editor HTML anda, dan silahkan anda ketikkan kode dibawah ini. Jangan pusing duluan liat angka-angkanya, karena kalau anda sudah punya acuan gambar seperti di atas, maka akan sangat membantu anda dalam memahami dan menuliskan kode-kode HTML dan javascriptnya

<html>
<head>
<title>Canvas HTML 5</title>
<style>
#gameContainer{position:relative; height:600px;}
.gamelayer{ position:absolute;top:0px; left:0px;}
</style>
<script type="application/javascript">
	function gambar(){
		var canvas=document.getElementById('canvas');
		var ctx=canvas.getContext('2d');
		//mari mulai menggambar....
		ctx.beginPath();
		ctx.fillStyle="#3b97c6";
		ctx.moveTo(168,200);//ujung atas
		ctx.lineTo(160,225);//bergerak kekiri -> nose kiri
		ctx.lineTo(160,258);//bergerak kebawah -> nose kiri
		ctx.lineTo(155,260); //kesamping kiri dikit
		ctx.lineTo(150,295); //menuju sayap
		
		//peluru kiri.. ini sebenarnya digambar acuan g ada
		//cuma biar gagah saya tambahin sendiri
		ctx.lineTo(133,308);
		ctx.lineTo(133,302);
		ctx.lineTo(131,300);
		ctx.lineTo(128,302);
		ctx.lineTo(128,310);
		
		ctx.lineTo(110,325); //sayap kiri
		ctx.lineTo(110,340); //ujung sayap kiri
		ctx.lineTo(145,335); //akhir sayap kiri
		ctx.lineTo(145,345);//menuju ekor
		
		ctx.lineTo(120,365);//ekor kiri
		ctx.lineTo(130,375);//ujung kiri
		ctx.lineTo(150,372);//lekukan di ekor kiri
		ctx.lineTo(150,365);//masih lekukan
		ctx.lineTo(160,365);//masih lekukan
		ctx.lineTo(165,370);//ujung lancip ekor
		ctx.lineTo(170,365);//lekukan sebelah kanan
		ctx.lineTo(180,365);//lekukan ekor
		ctx.lineTo(180,372);//lekukan ekor kanan	
		ctx.lineTo(200,375);//ujung ekor kanan
		ctx.lineTo(210,370);//ujung ekor kanan
		ctx.lineTo(185,345);//end of ekor
		
		ctx.lineTo(185,335);//menuju sayap
		ctx.lineTo(220,340);//sayap kanan
		ctx.lineTo(220,325);//ujung sayap kanan
		
		//peluru kanan
		ctx.lineTo(203,310);
		ctx.lineTo(203,302);
		ctx.lineTo(200,300);
		ctx.lineTo(198,302);
		ctx.lineTo(198,308);
		
		ctx.lineTo(185,295);//end of sayap
		
		ctx.lineTo(180,260);//nose kanan
		ctx.lineTo(175,260);//nose kanan
		ctx.lineTo(175,225);//nose kanan
		ctx.lineTo(168,200);
		ctx.fill();
		
		ctx.fillStyle="#CCCCCC";
		//mbikin asepnya yuk
		ctx.beginPath();
		ctx.moveTo(150,380);
		ctx.lineTo(152,420);
		ctx.lineTo(155,380);
		ctx.fill();
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(167,420);
		ctx.lineTo(170,380);
		ctx.fill();
		
		ctx.beginPath();
		ctx.moveTo(180,380);
		ctx.lineTo(182,420);
		ctx.lineTo(185,380);
		ctx.fill();
	}
	
</script>
</head>
<body onload="gambar()">
<div id="gameContainer">
	<canvas id="canvas" height="600" width="600" class="gamelayer"></canvas>	
</div>
</body>
</html>

Kok Ruwet?

Langkah di atas bukan merupakan langkah satu-satunya. Ada cara lain yang sangat gampang. Yakni anda bisa saja memilih file gambar pesawat tempur berformat png yang transparant. Selanjutnya langsung aja panggil gambar tersebut untuk ditempelkan dicanvas, jadi lah. Akan tetapi cara di atas bisa anda gunakan untuk lebih memahami tentang path dan untuk kebutuhan obyek bikinan anda sendiri.

Lebih lanjut lagi, apabila anda ingin menggerakkan pesawat tersebut ke kanan dan ke kiri atau ke atas dan ke bawah, maka dengan cara di atas, anda akan bisa belajar tentang transformasi dan bisa jadi plus translasi juga.

 

 

 

Incoming search terms:

Related Posts:

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>