[ADS] Top Ads

HTML 5 Canvas Element Template [Basic]


Kali ini kita akan kembali membahas tentang HTML5, Setelah beberapa waktu yang lalu saya mulai mengenalkan pembahasan HTML5 ini di postingan 5 Hal yang Harus Anda tau Tentang HTML 5 : Prolog, Pengenalan Canvas HTML 5 Dan Pengenalan Struktur HTML 5. Kali ini saya ingin mengajak anda untuk mengimplementasikannya.

Pembahasan tentang ini akan kita mulai dari penempatan Element Canvas pada Template. Element atau Unsur Canvas merupakan Tag HTML yang hampir sama dengan tag <table>, <div>, atau <a> dengan pengecualian yang isinya diberikan dengan Menggunakan Javascript. Dengan kata lain, untuk memanfaatkan Canvas HTML 5 anda harus menempatkan Canvas di suatu tempat di dalam tag HTML, membuat sebuah penginisialisasi fungsi Javascript yang nantinya kita gunakan untuk mengakses tag canvas setelah Page Load (abis Loading), dan kemudian memanfaatkan HTML5 Canvas API untuk menggambarkan visualisasinya.

Nha, element utama yang kita gunakan disini adalah

<canvas id="myCanvas"></canvas>


Lantas bagaimana Pengimplementasiannya ke dalam Template?

Karena disini saya menggunakan Blogspot, jadi untuk anda yang juga menggunakan Blogspot silahkan buat sebuah Blog testing terlebih dahulu untuk menguji postingan ini. Setelah blog percobaan tersedia, silahkan menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget. Setelah itu hapus seluruh Script Template anda. Jika Sudah silahkan tunggu dulu karena saya akan terlebih dahulu memberikan Script untuk pengguna Platform lain, Jadi untuk anda yang juga mengikuti panduan ini namun tidak menggunakan Blogspot, silahkan gunakan Script Template dibawah ini:

<!DOCTYPE html>
<html>
<head>
<script>

function init() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

// do stuff here
}

</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="576" height="300"></canvas>
</body>
</html>

Dan Untuk anda yang menggunakan Blogspot, Sebenarnya Script diatas pun dapat langsung anda gunakan, namun saya pastikan anda akan dihadapkan pada peringatan dibawah ini:

Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Seharunya ada satu dan hanya satu skin pada template, dan kami menemukan: 0

Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut Script untuk anda yang menggunakan Blogspot:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function init() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

// do stuff here
}

</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="576" height="300"></canvas>
</body>
</html>


Jika Sudah silahkan Save Template anda, dan Lihat hasilnya.

Lantas apa yang anda dapati? jika yang anda dapati hanyalah page Kosong artinya anda sudah mengikuti panduan ini dengan benar, karena disini kita memang belum membuat satupun Variabel untuk Canvas, karena kelanjutannya akan saya posting di postingan kemudian.

Keterangan:

1. Anda dapat menentukan Tinggi dan Lebar Canvas dengan mengganti angka yang saya beri warna merah.

2. Onload yang saya taruh di tag body merupakan bentuk inisialisasi tag canvas. Di dalam fungsi init (), kita dapat mengakses Objek DOM Canvas dengan menggunakan id. Dan kemudian mendapatkan konteks 2-d dengan menggunakan method getContext ().


Sumber:
Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, Untuk lebih jelasnya anda dapat bertanya langsung kepada mereka Via Twitter di @brucel & @rem



Posting Komentar

Copyright © 2023

Cookies