Generate Tumpukan Jerami dengan HTML5 Canvas

Oleh Uboiz (Edugameapp) - November 27, 2019

Kode HTML5 Canvas untuk membuat coretan abstrak dari tulisan sebelumnya, dapat digunakan untuk menggambarkan tumpukan jerami sebagaimana gambar di atas.

Gambar tersebut dapat digunakan sebagai dasar untuk membuat game bertema "Mencari jarum ditumpukan jerami" atau semacamnya.

Selain itu gambar dapat dibuat wallpaper atau untuk keperluan background lainnya.

Berikut ini kode HTML5 Canvas untuk menggenerate tumpukan jerami tersebut:

<html> 
<head> 
<title>Jerami</title> 
</head> 
<body> 
<div style="display: flex;justify-content: center;"> 
<canvas id="myCanvas" width="1024" height="500"> 
</canvas></div> 
<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 = "#e7b671"; 
 for(var i=0;i<10;i++){ 
  ctx.save(); 
  ctx.translate(Math.random()*canvas.width,Math.random()*canvas.height); 
  ctx.rotate((-180+360.0*Math.random()*Math.PI)/180); 
  ctx.shadowBlur = 6; 
  ctx.shadowOffsetX = 0; 
  ctx.shadowOffsetY = 0; 
  ctx.shadowColor = "black"; 
  ctx.beginPath(); 
  var d=100; 
  var a=-d; 
  while(a<d){ 
   ctx.globalAlpha=(1.0-1.0*Math.abs(a)/d); 
   ctx.fillRect(a,0,1,1); 
   a++; 
  } 
  ctx.closePath(); 
  ctx.restore(); 
 } 

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