HTML 5 Canvas Rectangle Tutorial [Basic]
OK, setelah membahas tentang HTML 5 Canvas Shape Fill Tutorial [Basic], kini saya akan mengajak anda untuk beralih ke Method selanjutnya, yaitu: rect(). Dari judulnya saja saya yakin anda pasti sudah bisa menebak apa yang akan kita buat kali ini hhe, yupz kita memang akan membuat Sebuah persegi Panjang dengan menggunakan HTML 5. kanvas persegi panjang dalam HTML 5 ini sendiri diposisikan oleh Parameter: Parameter topLeftCornerX dan topLeftCornerY, Dan ukurannya dengan parameter width(lebar) dan height(tinggi).
Berikut susunan Method baru yang akan kita gunakan:
Silahkan KLIK DISINI untuk melihat demonya terlebh dahulu
Dan berikut Script untuk membuatnya:
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
Berikut susunan Method baru yang akan kita gunakan:
c.rect(topLeftCornerX,topLeftCornerY,width,height);
Silahkan KLIK DISINI untuk melihat demonya terlebh dahulu
Dan berikut Script untuk membuatnya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawRectangle() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 200;
var height = 100;
c.rect(topLeftCornerX,topLeftCornerY,width,height);
c.fillStyle="#8ED6FF";
c.fill();
c.lineWidth=5;
c.strokeStyle="black";
c.stroke();
}
</script>
</head>
<body onload="drawRectangle()">
<canvas id="myCanvas" width="578" height="200"></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