Pada artikel sebelumnya kita membahas tentang mengetahui kegunaan canvas pada html dan ketika kita lihat element canvas sendiri harus di bantuk dengan sebuah javascript oke kalau begitu pada kesempatan kali ini kita akan berkenalan dengan JavaScript untuk canvas di HTML5, kita akan membahasnya cara menggabungkannya jangan kemana-mana ya teman-teman simak terus.
untuk belajar berkenalan dengan JavaScript untuk canvas di HTML5 dan anda belum pernah menggunakan JavaScript, mungkin akan sedikit ‘terintimidasi’ dengan kode program yang akan kita gunakan. Ini karena JavaScript adalah bahasa pemrograman murni, tidak seperti HTML dan CSS yang hanya ‘bahasa kode’. Ditambah lagi JavaScript menggunakan konsep pemrograman objek.
Walaupun demikian, kita akan mencoba menjelaskan baris per baris kode JavaScript yang digunakan. Apabila anda kurang paham, tidaklah menjadi masalah. Anda boleh mengabaikan maksud dari kode tersebut, dan hanya fokus melihat bagaimana hasil tampilannya. Setelah anda mempelajari JavaScript, kode-kode ini dapat dimengerti dengan mudah. Untuk menggunakan JavaScript, kita harus menyisipkan tag <script> setelah penulisan tag <canvas>, seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="kertas_gambar" width="500" height="300"></canvas>
<script>
var canvasku = document.getElementById("kertas_gambar");
var context = canvasku.getContext("2d");
</script>
</body>
</html>Posisi peletakan tag <script> sebenarnya bisa dimana saja, bisa dibagian <head>, atau pada bagian paling akhir halaman sebelum tag penutup </body> seperti contoh diatas.
Saya meletakkan tag <script> di posisi paling bawah halaman karena kita perlu mengakses tag <canvas> yang berada diatasnya. Ini disebabkan cara web browser yang memproses halaman
web mulai dari baris paling atas, kemudian di proses baris-per-baris hingga baris paling bawah.
Kembali ke canvas, untuk mulai ‘menggambar’ di tag <canvas>, kita harus mencari canvas mana yang ingin digambar. Di dalam JavaScript, hal ini dilakukan dengan perintah document.getElementById().
var canvasku = document.getElementById("kertas_gambar");Kode diatas akan mencari tag HTML yang memiliki id=”kertas_gambar”, kemudian menyimpannya ke dalam variabel canvasku. Dengan kata lain, variabel canvasku akan berisi ‘objek’ HTML dengan id=”kertas_gambar”.
selanjutnya adalah menetapkan bahwa kita ingin menggambar 2 dimensi pada objek canvas ini. Perintah yang diperlukan adalah getContext()
var context = canvasku.getContext("2d");Sekarang, variabel context menjadi ‘objek penampung’ untuk seluruh perintah canvas yang akan kita tulis setelah ini. Anda bisa mengubah kata context menjadi kata lain.
Oke teman-teman memang sangat sulit jika kita belum pernah membuat belajar yang namanya javascript, tapi tidak apa-apa, karena belum terbiasa oke saya rasa cukup sampai disini dulu belajar kita tentang berkenalan dengan JavaScript untuk canvas di HTML5, semoga bermanfaat dan sampai jumpa di artikel saya selanjutnya.
The post Berkenalan dengan JavaScript untuk Canvas di HTML5 appeared first on Kursus Website Terbaik.