Menggambar Lingkaran Menyala dengan Efek Shadow


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> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Menyikapi Ucapan AI Pejabat

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem

Menambahkan Konfirmasi Email di Google Form