HTML 5 Canvas Image Size Tutorial [Basic]
Masih Lanjutan Dari postingan HTML 5 Canvas Image Tutorial [Basic], kali ini saya ingin mengajak anda untuk belajar tentang Canvas Image Size atau ukuran yang bisa kita rubah sesukanya tanpa perlu menggunakan Editor Image layaknya CorelDraw atau Photoshop(Jiah kerjaan gw banget nie wkwk). Disini kita bisa menggunakan Method drawImage() dan menambahkan dua argumen tambahan, yaitu destWidth dan destHeight.
Dan untuk kali ini Method yang kita gunakan adalah
c.drawImage(imageObj,destX,destY,destWidth,destHeight);
Nha, kali ini masih menggunakan Foto YUI(My Fav. Singers), saya ingin mengubahnya menjadi lebih kecil dari ukuran sebelumnya. Untuk itu silahkan perhatikan Demo postingan sebelumnya dan Demo postingan ini untuk melihat perbedaannya.
Untuk demonya Silahkan KLIK DISINI
Dan berikut Script yang dapat anda gunakan:
<?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 = 188;
var destY = 130;
var destWidth = 200;
var destHeight = 137;
var imageObj = new Image();
imageObj.onload = function() {
c.drawImage(imageObj,destX,destY,destWidth,destHeight);
}
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.
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