HTML 5 Canvas Linear Gradient Tutorial [Basic]
OK, setelah membahas HTML 5 Canvas Oval Tutorial [Basic], kini saya akan mengajak anda untuk beralih ke Pembahasan selanjutnya, yaitu Gradient. Gradient disini akan saya bagi ke dalam 2 postingan, dan di postingan ini saya akan terlebih dahulu membahas tentang HTML5 Canvas Linear Gradient(Gradient linier).
Untuk membuat Gradient Linier kita dapat menggunakan Method baru kita, yaitu: createLinearGradient(). Gradien Linier didefinisikan dengan garis imajiner yang mendefinisikan arah gradien. Setelah membuat Gradien Linier, kita dapat menyisipkan warna dengan menggunakan Properti addColorStop.
Berikut Susunan Method kita kali ini:
Untuk Demo-nya Silahkan KLIK DISINI
Dan berikut Script yang dapat anda gunakan:
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 Dari HTML 5 Canvas Linear Gradient ini:
Perhatikan Diagram diatas. Gerakan Gradien linier dari titik awal ke titik akhir dari garis imajiner didefinisikan dengan createLinearGradient (). Disini saya menggunakan 2 warna pada Properti addColorStop, yaitu biru muda untuk titik awal dan biru tua untuk titik akhir. addColorStop ditempatkan disepanjang garis imajiner di suatu tempat antara 0 dan 1, dimana 0 adalah pada titik awal, dan 1 adalah 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
Untuk membuat Gradient Linier kita dapat menggunakan Method baru kita, yaitu: createLinearGradient(). Gradien Linier didefinisikan dengan garis imajiner yang mendefinisikan arah gradien. Setelah membuat Gradien Linier, kita dapat menyisipkan warna dengan menggunakan Properti addColorStop.
Berikut Susunan Method kita kali ini:
c.createLinearGradient(startX, startY, endX, endY)
grd.addColorStop(offset, color)
Untuk Demo-nya Silahkan KLIK DISINI
Dan berikut Script yang dapat anda gunakan:
<?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
var grd=c.createLinearGradient(230,0,370,200);
grd.addColorStop(0,"#8ED6FF"); // light blue
grd.addColorStop(1,"#004CB3"); // dark blue
c.fillStyle=grd;
c.fill();
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.
Keterangan Dan Penjelasan Dari HTML 5 Canvas Linear Gradient ini:
Perhatikan Diagram diatas. Gerakan Gradien linier dari titik awal ke titik akhir dari garis imajiner didefinisikan dengan createLinearGradient (). Disini saya menggunakan 2 warna pada Properti addColorStop, yaitu biru muda untuk titik awal dan biru tua untuk titik akhir. addColorStop ditempatkan disepanjang garis imajiner di suatu tempat antara 0 dan 1, dimana 0 adalah pada titik awal, dan 1 adalah 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