HTML 5 Canvas Image Tutorial [Basic]
Beralih dari HTML 5 Canvas Multi-color Radial Gradient Tutorial [Basic], kali ini saya akan mengajak anda untuk membahas HTML5 Canvas Image atau Kanvas Untuk gambar pada HTML 5. Untuk membuat suatu gambar, kita dapat menggunakan Method drawImage(). Disini kita memerlukan Objek gambar dan titik tujuan. Titik tujuan relatif mengarah ke sudut atau pojok atas gambar.
Sebagai Penggila, Fans, bahkan bisa dibilang Pengagum berat YUI hhe, untuk Objek kali ini saya akan menggunakan Foto YUI :P tadinya sih mau moto-motoin seluruh Album YUI yang saya punya, tapi kayanya kebanyakan klo cuma buat contoh, jadi cukup satu foto YUI aja hhe...
Nha, kali ini Method yang kita gunakan adalah:
Untuk Demonya Silahkan KLIK DISINI
Dan berikut Scriptnya:
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
Penjelasan HTML 5 Canvas Image Ini:
Karena Method drawImage() membutuhkan Objek Gambar, kita harus terlebih dahulu menyiapkan gambar dan tentunya harus menunggu sampai Load Image dari Hostingan terbaca. Jadi prosesnya pun tergantung dari Load Image yang anda gunakan. Dan tentunya, karena kita memanfaatkan hostingan, kita pun harus menggunakan Properti onload dan menentukan Sumber Url Gambar dengan src.
Ps: silahkan ganti kata Url Gambar Anda dengan Url Gambar yang ingin digunakan.
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
Sebagai Penggila, Fans, bahkan bisa dibilang Pengagum berat YUI hhe, untuk Objek kali ini saya akan menggunakan Foto YUI :P tadinya sih mau moto-motoin seluruh Album YUI yang saya punya, tapi kayanya kebanyakan klo cuma buat contoh, jadi cukup satu foto YUI aja hhe...
Nha, kali ini Method yang kita gunakan adalah:
c.drawImage(imageObj,destX,destY);
Untuk Demonya Silahkan KLIK DISINI
Dan berikut Scriptnya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawImage() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var destX = 69;
var destY = 50;
var imageObj = new Image();
imageObj.onload = function() {
c.drawImage(imageObj,destX,destY);
}
imageObj.src = "Url Gambar Anda";
}
</script>
</head>
<body onload="drawImage()">
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
Penjelasan HTML 5 Canvas Image Ini:
Karena Method drawImage() membutuhkan Objek Gambar, kita harus terlebih dahulu menyiapkan gambar dan tentunya harus menunggu sampai Load Image dari Hostingan terbaca. Jadi prosesnya pun tergantung dari Load Image yang anda gunakan. Dan tentunya, karena kita memanfaatkan hostingan, kita pun harus menggunakan Properti onload dan menentukan Sumber Url Gambar dengan src.
Ps: silahkan ganti kata Url Gambar Anda dengan Url Gambar yang ingin digunakan.
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
Posting Komentar