HTML 5 Canvas Multi-color Radial Gradient Tutorial [Basic]
Daftar Isi
Masih kelanjutan Dari HTML 5 Canvas Radial Gradient Tutorial [Basic], kali ini saya akan memberikan Script untuk membuat Radial Gradient yang mempunyai banyak Warna (Multi-color). Untuk penjelasan tentang HTML 5 Canvas Radial Gradient Tutorial [Basic] silahkan baca postingan sebelumnya, karena postingan kali ini hanya Modifikasi dari postingan sebelumnya.
Masih sama seperti sebelumnya, disini kita masih menggunakan Method
Silahkan Lihat Demonya terlebih dahulu, KLIK DISINI
Dan 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.
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
Masih sama seperti sebelumnya, disini kita masih menggunakan Method
c.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)
Silahkan Lihat Demonya terlebih dahulu, KLIK DISINI
Dan 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 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,338,50,200);
grd.addColorStop(0,"red");
grd.addColorStop(0.17,"orange");
grd.addColorStop(0.33,"yellow");
grd.addColorStop(0.5,"green");
grd.addColorStop(0.666,"blue");
grd.addColorStop(1,"violet");
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.
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
