HTML 5 Canvas Radial Gradient Tutorial [Basic]
Dari HTML 5 Canvas Linear Gradient, kita akan beralih ke HTML5 Canvas Radial Gradient. Untuk membuat Kanvas Gradien Radial kita dapat menggunakan Method baru kita, yaitu: createRadialGradient(). HTML5 Canvas Radial Gradient atau Kanvas Gradien radial ini didefinisikan dengan dua buah lingkaran Imajiner(Lingkaran Awal dan Lingkaran Akhir).
Berikut Susunan Method kita kali ini:
c.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)
Untuk melihat Demonya, silahkan KLIK DISINI
Dan berikut Script yang dapat anda gunakan untuk membuatnya:
<?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.createRadialGradient(238,50,10,238,50,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 Radial Gradient ini:
Perhatikan diagram diatas. Untuk membuat Radial Gradien kita perlu mendefinisikan dua lingkaran imajiner (lingkaran awal dan lingkaran akhir) menggunakan Method createRadialGradient (). Gradien radial yang berasal dari lingkaran awal akan bergerak secara radial ke ujung lingkaran.
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