Honeycomb Style Wallpaper dengan HTML5 Canvas


Bentuk hexagon merupakan bentuk yang menarik dan identik dengan bentuk sarang lebah madu (Honeycomb).

Gambar di atas adalah gambar hasil generate bentuk hexagon, yang disusun sesuai urutan, dengan lebar dan jarak tertentu, menggunakan HTML5 Canvas.

Dengan menambahkan efek warna gradient hijau pada background dan shadow pada masing-masing bentuk hexagonnya, dapat menambahkan efek futuristik dan elegan sebagai wallpaper dekstop, smartphone, tablet atau semacamnya.

Berikut kode HTML5 Canvasnya:
<html> 
<head> 
<title>Honeycomb Shape</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var points=[]; 
 
var ctx = canvas.getContext("2d"); 
var grd = ctx.createRadialGradient(0.5*canvas.width,0.5*canvas.height,0,0.5*canvas.width,0.5*canvas.height,360); 
grd.addColorStop(0, "#9dfc03"); 
grd.addColorStop(1, "black"); 
 
// Fill with gradient 
ctx.fillStyle = grd; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
var lebarx=50,lebary=40,padding=8; 
var dx=0,dy=0,num=0; 
 
function Menggambar() 
{ 
 var n=10; 
 var m=30; 
 var ax=num%n; 
 var ay=Math.floor(num/m)%m; 
 var bx=0; 
 var by=0; 
 if(ay%2==1){ 
  bx=1.5*lebarx+padding; 
 } 
 dx=-(3*lebarx+2*padding)+bx+ax*(3*lebarx+2*padding); 
 dy=-3*lebary+by+ay*lebary+(ay-1)*0.5*padding; 

 ctx.save(); 

 points[0]=0.5*lebarx; 
 points[1]=0; 

 points[2]=1.5*lebarx; 
 points[3]=0; 

 points[4]=2*lebarx; 
 points[5]=lebary; 

 points[6]=1.5*lebarx; 
 points[7]=2*lebary; 

 points[8]=0.5*lebarx; 
 points[9]=2*lebary; 

 points[10]=0; 
 points[11]=lebary; 

 ctx.translate(dx,dy); 
 ctx.fillStyle="#263238"; 
 ctx.beginPath(); 
 ctx.shadowColor = "black"; 
 ctx.shadowBlur = 5; 
 ctx.shadowOffsetX = 2; 
 ctx.shadowOffsetY = 2; 
 ctx.moveTo(points[0],points[1]); 
 ctx.lineTo(points[2],points[3]); 
 ctx.lineTo(points[4],points[5]); 
 ctx.lineTo(points[6],points[7]); 
 ctx.lineTo(points[8],points[9]); 
 ctx.lineTo(points[10],points[11]); 
 ctx.lineTo(points[0],points[1]); 
 ctx.fill(); 
 ctx.restore(); 

 num++; 
 if(num<700)window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Algorithma Java Mencari KPK dan FPB

Algorithma Coretan Abstrak dengan HTML5 Canvas

Kode Greenfoot Game Flappy Bird

Menyembunyikan Failed Load Images di Blogger

Kumpulan Source Code Greenfoot

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

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

Kode Greenfoot Game Snake Sederhana

Kebodohan Karyawan Menyalahkan Sistem