Menggambar Lingkaran Menyala dengan Efek Shadow

Oleh Uboiz (Edugameapp) - Agustus 26, 2019

Fungsi bayangan ternyata merupakan salah satu hal penting dalam proses menggambar, terutama untuk menambahkan kesan elegan.

Gambar di atas, adalah contoh pemanfaatan efek bayangan di HTML5 Canvas, untuk menggambar lingkaran yang seakan menyala.

Dengan warna bayangan sama dengan warna lingkaran, akan dapat dihasilkan bentuk lingkaran yang futuristik.

Kode di bawah ini adalah kode untuk menggambar lingkaran di atas:

<html> 
<head> 
<title>Draw Circle Generator</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
function Menggambar() 
{ 
 ctx.fillStyle="#50575C"; 
 var rx=0.5*canvas.width; 
 var ry=0.5*canvas.height; 
 var r=Math.sqrt(rx*rx+ry*ry); 

 var x=0,y=0; 
 while(y<canvas.height){ 
  while(x<canvas.width){ 
   var d=2+5*Math.random(); 
   rx=x-0.5*canvas.width; 
   ry=y-0.5*canvas.height; 
   var ro=Math.sqrt(rx*rx+ry*ry); 
   var a=1.0*ro/r; 
   if(a>1)a=1.0; 
   ctx.globalAlpha=1.0-a; 
   ctx.beginPath(); 
   ctx.shadowColor="white"; 
   ctx.fillRect(x,y,d,3); 
   ctx.closePath(); 
   x+=d+1; 
  } 
  x=0; 
  y+=5; 
 } 

 ctx.globalAlpha=1.0; 
 ctx.strokeStyle="#03BBFF"; 
 ctx.lineWidth = 15; 
 ctx.beginPath(); 
 ctx.shadowColor="#03BBFF"; 
 ctx.shadowBlur=20; 
 ctx.shadowOffsetX=0; 
 ctx.shadowOffsetY=0; 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,100, 0, 2 * Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 

 //window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>