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
1<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
1var canvas = document.getElementById('tutorial');
2var 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
01<html>
02<head>
03<title>Canvas HTML 5</title>
04<style>
05#gameContainer{position:relative; height:600px;}
06.gamelayer{ position:absolute;top:0px; left:0px;}
07</style>
08<script type="application/javascript">
09    function gambar(){
10        var canvas=document.getElementById('canvas');
11        var ctx=canvas.getContext('2d');
12        //mari mulai menggambar....
13        ctx.beginPath();
14        ctx.fillStyle="#3b97c6";
15        ctx.moveTo(168,200);//ujung atas
16        ctx.lineTo(160,225);//bergerak kekiri -> nose kiri
17        ctx.lineTo(160,258);//bergerak kebawah -> nose kiri
18        ctx.lineTo(155,260); //kesamping kiri dikit
19        ctx.lineTo(150,295); //menuju sayap
20         
21        //peluru kiri.. ini sebenarnya digambar acuan g ada
22        //cuma biar gagah saya tambahin sendiri
23        ctx.lineTo(133,308);
24        ctx.lineTo(133,302);
25        ctx.lineTo(131,300);
26        ctx.lineTo(128,302);
27        ctx.lineTo(128,310);
28         
29        ctx.lineTo(110,325); //sayap kiri
30        ctx.lineTo(110,340); //ujung sayap kiri
31        ctx.lineTo(145,335); //akhir sayap kiri
32        ctx.lineTo(145,345);//menuju ekor
33         
34        ctx.lineTo(120,365);//ekor kiri
35        ctx.lineTo(130,375);//ujung kiri
36        ctx.lineTo(150,372);//lekukan di ekor kiri
37        ctx.lineTo(150,365);//masih lekukan
38        ctx.lineTo(160,365);//masih lekukan
39        ctx.lineTo(165,370);//ujung lancip ekor
40        ctx.lineTo(170,365);//lekukan sebelah kanan
41        ctx.lineTo(180,365);//lekukan ekor
42        ctx.lineTo(180,372);//lekukan ekor kanan   
43        ctx.lineTo(200,375);//ujung ekor kanan
44        ctx.lineTo(210,370);//ujung ekor kanan
45        ctx.lineTo(185,345);//end of ekor
46         
47        ctx.lineTo(185,335);//menuju sayap
48        ctx.lineTo(220,340);//sayap kanan
49        ctx.lineTo(220,325);//ujung sayap kanan
50         
51        //peluru kanan
52        ctx.lineTo(203,310);
53        ctx.lineTo(203,302);
54        ctx.lineTo(200,300);
55        ctx.lineTo(198,302);
56        ctx.lineTo(198,308);
57         
58        ctx.lineTo(185,295);//end of sayap
59         
60        ctx.lineTo(180,260);//nose kanan
61        ctx.lineTo(175,260);//nose kanan
62        ctx.lineTo(175,225);//nose kanan
63        ctx.lineTo(168,200);
64        ctx.fill();
65         
66        ctx.fillStyle="#CCCCCC";
67        //mbikin asepnya yuk
68        ctx.beginPath();
69        ctx.moveTo(150,380);
70        ctx.lineTo(152,420);
71        ctx.lineTo(155,380);
72        ctx.fill();
73         
74        ctx.beginPath();
75        ctx.moveTo(165,380);
76        ctx.lineTo(167,420);
77        ctx.lineTo(170,380);
78        ctx.fill();
79         
80        ctx.beginPath();
81        ctx.moveTo(180,380);
82        ctx.lineTo(182,420);
83        ctx.lineTo(185,380);
84        ctx.fill();
85    }
86     
87</script>
88</head>
89<body onload="gambar()">
90<div id="gameContainer">
91    <canvas id="canvas" height="600" width="600" class="gamelayer"></canvas>   
92</div>
93</body>
94</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.

Labels: ,

0 komentar

Write Down Your Responses

Newer Post Older Post Home