HTML 5 Canvas Custom Shape Tutorial [Basic]
Setelah selesai membahas Properti lineJoin, kini kita akan beralih ke Method selanjutnya yaitu: closePath(). HTML5 Canvas Custom Shape sendiri memang terbentuk dari Method-method sebelumnya dan masih saling terkait, untuk itu saya anjurkan jangan langsung Loncat ke Pembahasan ini jika anda belum memperlajari pembahasan sebelumnya. Untuk membuat Custom Shape(bentuk Custom), kita dapat membuat Jalur layaknya HTML 5 Canvas Path Tutorial [Basic] sebelumnya, yang nantinya akan kita tutup menggunakan Method closePath() itu tadi.
Dan ini dia Method baru yang akan saya perkenalkan kepada anda:
Sebelum beranjak ke Script, Silahkan Lihat dulu DEMO-nya DISINI
Dan berikut Scripnya:
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
Dan ini dia Method baru yang akan saya perkenalkan kepada anda:
c.closePath();
Sebelum beranjak ke Script, Silahkan Lihat dulu DEMO-nya DISINI
Dan berikut Scripnya:
<?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.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