HTML 5 Canvas Quadratic Curve Tutorial [Basic]
Ocre... Malam ini, saya akan kembali melanjutkan pembahasan kita tentang HTML 5. Melanjutkan postingan saya tentang HTML5 Canvas Arc Tutorial [Basic] sebelumnya, kali ini saya ingin mengajak anda beralih ke Method selanjutnya dalam rangkaian HTML5 Canvas Curve, yaitu Method quadraticCurveTo(). Nha, untuk dapat membuat Kurva Quadratik dengan HTML5, saya akan kembali mengenalkan susunan Method baru kita ini, dan berikut Method untuk membuat Kurva Quadrat ini:
Dari Susunan Method diatas, dapat anda lihat bahwa Kuarva Kuadratik ini didefinisikan oleh Context Point, Titik kontrol (X dan Y) serta Titik Akhir (X dan Y).
Sebelum beranjak ke Script implementasinya, saya ingin mengajak anda melihat Demonya terlebih dahulu, Silahkan KLIK DISINI untuk melihat Demonya.
Dan tanpa buang waktu, berikut Scriptnynya:
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 dan Penjelasan HTML5 Canvas Quadratic Curve:
Perhatikan Ilustrasi Diagram diatas, Sebuah Kontrol Point mendefinisikan lengkungan kurva kuadrat tersebut dengan membuat dua buah garis Tangensial (tan) Imajiner yang terhubung ke Context Point dan Ending Point(Midpoint 1 & 2). Dalam hal ini, Context point di definisikan oleh Method moveTo(). Dengan menggerakkan Control Point menjauh dari Context Point dan ending point anda akan menciptakan Kurva tajam. Sedangkan dengan menggerakkan Control Point lebih dekat ke Context point dan Ending point akan menciptakan Kurva yang lebih luas.
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
c.quadraticCurveTo(controlX, controlY, endingPointX, endingPointY);
Dari Susunan Method diatas, dapat anda lihat bahwa Kuarva Kuadratik ini didefinisikan oleh Context Point, Titik kontrol (X dan Y) serta Titik Akhir (X dan Y).
Sebelum beranjak ke Script implementasinya, saya ingin mengajak anda melihat Demonya terlebih dahulu, Silahkan KLIK DISINI untuk melihat Demonya.
Dan tanpa buang waktu, berikut Scriptnynya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawQuadraticCurve() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
c.moveTo(188,150);
c.quadraticCurveTo(288, 0, 388, 150);
c.lineWidth=10;
c.strokeStyle="black"; // line color
c.stroke();
}
</script>
</head>
<body onload="drawQuadraticCurve()">
<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 dan Penjelasan HTML5 Canvas Quadratic Curve:
Perhatikan Ilustrasi Diagram diatas, Sebuah Kontrol Point mendefinisikan lengkungan kurva kuadrat tersebut dengan membuat dua buah garis Tangensial (tan) Imajiner yang terhubung ke Context Point dan Ending Point(Midpoint 1 & 2). Dalam hal ini, Context point di definisikan oleh Method moveTo(). Dengan menggerakkan Control Point menjauh dari Context Point dan ending point anda akan menciptakan Kurva tajam. Sedangkan dengan menggerakkan Control Point lebih dekat ke Context point dan Ending point akan menciptakan Kurva yang lebih luas.
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