HTML 5 Canvas Shape Fill Tutorial [Basic]
Ocre, setelah sebelumnya kita mempelajari tentang HTML 5 Canvas Custom Shape Tutorial [Basic], kali ini kita akan beralih ke Method baru kita, yaitu: fill() Dan Properti baru kita, yaitu: fillStyle. Properti fillStyle mendefinisikan bentuk warna. Dan Method fill() digunakan untuk mengisi bentuk. Kecuali dinyatakan lain, bentuk default dari fill style untuk HTML 5 adalah Hitam.
Sedikit Catatan untuk anda: Ketika Mengatur fill dan stroke untuk sebuah bentuk (shape), Gunakan fill() sebelum stroke(), agar tidak tumpang tindih.
Dan berikut Properti dan Method baru kita:
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.
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
Sedikit Catatan untuk anda: Ketika Mengatur fill dan stroke untuk sebuah bentuk (shape), Gunakan fill() sebelum stroke(), agar tidak tumpang tindih.
Dan berikut Properti dan Method baru kita:
c.fillStyle
c.fill()
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 drawCloud() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
c.beginPath(); // begin custom shape
c.moveTo(170,80);
c.bezierCurveTo(130, 100, 130, 150, 230, 150);
c.bezierCurveTo(250, 180, 320, 180, 340, 150);
c.bezierCurveTo(420, 150, 420, 120, 390, 100);
c.bezierCurveTo(430, 40,370, 30, 340, 50);
c.bezierCurveTo(320, 5,250, 20, 250, 50);
c.bezierCurveTo(200, 5,150, 20, 170, 80);
c.closePath(); // complete custom shape
c.lineWidth=5;
c.fillStyle="#8ED6FF";
c.fill();
c.strokeStyle="#0000ff";
c.stroke();
}
</script>
</head>
<body onload="drawCloud()">
<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