Generate Tumpukan Jerami dengan HTML5 Canvas


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> 

Komentar



Postingan populer dari blog ini

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

Menyikapi Ucapan AI Pejabat

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Ketika Pengelola Basis Data Terabaikan

Kebodohan Karyawan Menyalahkan Sistem

Apps Script untuk Cetak Sertifikat

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Kumpulan Source Code Greenfoot

Game TicTacToe dengan Greenfoot

Menyembunyikan Failed Load Images di Blogger