[ADS] Top Ads

HTML 5 Canvas Path Tutorial [Basic]



Melanjutkan pembahasan kita sebelumnya tentang HTML 5 Canvas Bezier Curve Tutorial [Basic], pagi ini saya ingin mengajak anda untuk beralih ke Method baru kita selanjutnya, yaitu beginPath(). Apa kegunaan dari Method beginPath() ini? kita bisa menggunakan beginPath() setiap kali kita ingin membuat sebuah Path atau jalur baru. Nha disini, kita pun masih akan memanfaatkan pembahasan kita yang sebelum-sebelumnya, karena disini kita masih akan menggunakan Method lineTo(), quadraticCurveTo(), dan bezierCurveTo() untuk membuat Subpath(bagian dari path) menjadi path atau jalan yang ingin kita bentuk. Kenapa? karena method baru kita kali ini tidak mempunyai Koordinat seperti Method-method sebelumnya, untuk lebih jelasnya perhatikan susunan Method path dibawah ini:

c.beginPath()


Terlihat jelas bahwa untuk membuat sebuah jalur, kita membutuhkan bantuan dari Method lineTo(), quadraticCurveTo(), dan bezierCurveTo().

Untuk bentuknya, Path bisa dibuat menjadi berbagai bentuk sesuai Imaginasi dan keinginan anda, bahkan Demo Harmonic Oscillator sebelumnya bisa dibilang masih menjadi bagian dari pembahasan tentang Path. Namun, untuk untuk melihat Demo Dasar yang akan saya berikan Scriptnya kepada anda, silahkan KLIK DISINI

Dan berikut Script kita kali ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawPath() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");

c.beginPath();
c.moveTo(100,20);
c.lineTo(200,160); // line 1
c.quadraticCurveTo(230, 190, 250,120); // quadratic curve
c.bezierCurveTo(290, 20, 300, 200, 400, 150); // bezier curve
c.lineTo(500, 90); // line 2

c.lineWidth=5;
c.strokeStyle="#0000ff";
c.stroke();
}

</script>
</head>
<body onload="drawPath()">
<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.

Keterangan Diagram dari HTML5 Canvas Path :



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

Copyright © 2023

Cookies