HTML 5 Canvas Bezier Curve Tutorial [Basic]
Setelah mempelajari HTML 5 Canvas Quadratic Curve Tutorial [Basic], kini saya akan mengajak anda beralih ke Method selanjutnya, yaitu bezierCurveTo(). Yupz, kali ini pun kita masih akan membahas tentang Kurva. Lantas apa bedanya Quadratic Curve dengan Bezier Curve? Salah satu perbedaan yang paling mencolok adalah Bezier Curve didefinisikan dengan dua control Point(titik kontrol) bukan satu layaknya Quadratic Curve. Dan Control point ini tentunya memungkinkan anda untuk membuat lekukan yang lebih Kompleks.
Tanpa banyak omong lagi, berikut susuan Method baru yang akan kita gunakan:
Dan sebelum beralih ke Script, Silahkan lihat dahulu demonya DISINI
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.
Keterangan dan Penjelasan HTML5 Canvas Bezier Curve:
Perhatikan diagram diatas, Bezier Curve didefinisikan dengan Context point, dua buah Control point(titik kontrol) dan titik akhir. Bagian pertama kurva adalah Garis Tangensial (tan) Imaginer yang didefinisikan oleh Context point dan Control point 1. Sedangkan Bagian kedua dari kurva Tangensial dengan Garis Imaginer ini adalah didefinisikan oleh Control point 2 dan ending point (titik akhir).
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
Tanpa banyak omong lagi, berikut susuan Method baru yang akan kita gunakan:
c.bezierCurveTo(cPointX1, cPointY1, cPointX2, cPointY2, endPointX, endPointY);
Dan sebelum beralih ke Script, Silahkan lihat dahulu demonya DISINI
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 drawBezierCurve() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
c.moveTo(188,130);
c.bezierCurveTo(140, 10, 388, 10, 388, 170);
c.lineWidth=10;
c.strokeStyle="black"; // line color
c.stroke();
}
</script>
</head>
<body onload="drawBezierCurve()">
<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 Bezier Curve:
Perhatikan diagram diatas, Bezier Curve didefinisikan dengan Context point, dua buah Control point(titik kontrol) dan titik akhir. Bagian pertama kurva adalah Garis Tangensial (tan) Imaginer yang didefinisikan oleh Context point dan Control point 1. Sedangkan Bagian kedua dari kurva Tangensial dengan Garis Imaginer ini adalah didefinisikan oleh Control point 2 dan ending point (titik akhir).
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