Cara Membuat Radial Gradient dengan Canvas
Orang yang memendam perasaan seringkali terjebak oleh hatinya sendiri. Sibuk merangkai seluruh kejadian di sekitarnya bagi membenarkan hatinya berharap. Sibuk menghubungkan banyak hal agar hatinya senang menimbun mimpi. Sehingga suatu ketika dia tak tahu lagi mana simpul yang nyata dan mana simpul yang dusta. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Radial Gradient dengan Canvas.
Seandainya di panduan sebelumnya mengenai linear gradient yang merancang gradient searah horizontal dan vertikal. Nah kali ini saya akan memberitahukan kepada kalian mengenai bagaimana Cara Membangun Radial Gradient dengan Canvas. Berikut caranya.
Pertama-tama-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 bagi 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? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai bagaimana Cara Membangun Radial Gradient dengan Canvas.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
