Orang yang memendam perasaan seringkali terjebak oleh hatinya sendiri. Sibuk merangkai semua kejadian di sekitarnya untuk membenarkan hatinya berharap. Sibuk menghubungkan banyak hal agar hatinya senang menimbun mimpi. Sehingga suatu ketika dia tidak tahu lagi mana simpul yang nyata dan mana simpul yang dusta. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Radial Gradient dengan Canvas.
Jika pada tutorial sebelumnya tentang linear gradient yang membuat gradient searah horizontal dan vertikal. Nah kali ini saya akan memberitahukan kepada kalian tentang bagaimana Cara Membuat Radial Gradient dengan Canvas. Berikut caranya.
Pertama-tama, siapkan file index.html nya.
Kemudian, isi di bagian <body> tag Canvas berikut.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas>
Dan yang terakhir, isi untuk bagian Javascript nya.
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
Bagaimana teman-teman? Cukup mudah bukan?
Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Radial Gradient dengan Canvas.
Semoga bermanfaat, terima kasih