Membuat Efek Salju dengan HTML5 Canvas dan Javascript pada Website

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.

Pada kesempatan kali ini saya akan bebrbagi tutorial mengenai cara Membuat Efek Salju Dengan HTML 5 dan Javascript Pada Website, kalian pasti sudah tau kan salju 😀 , Nah bagaimana kalo pada website kita terdapat efek salju ? pasti akan lebih menarik yah ? bagaimana cara membuatnya, yuk kita simak praktiknya berikut ini.

1. Buka dulu teks editornya, kemudian ketikan kode HTML berikut.

<canvas id="town" width="940" height="650"></canvas>

2. Setelah itu, lanjutkan untuk kode CSS, ketikan kode CSS berikut.

body {
  background: url(img/pattern.png);
  min-height: 100vh;
  margin-top: 3rem;
  font-family: 'Poiret One', cursive;
}
canvas {
  box-sizing: border-box;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Maruoka-jo_Sakura.JPG);
  background-size: cover;
  border: 20px solid #111;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  box-shadow: 0px 0px 50px 1000px rgba(0,0,0,0.3);
}

3. Kalo sudah, lanjutkan kembali untuk kode javascript, ketikan kode javascript berikut.

var canvas = document.getElementById("town"),
ctx = canvas.getContext("2d"),
W = canvas.width,
H = canvas.height,
maxParticles = 25,
maxParticleSize = 8,
minParticleSize = 2,
maxMove = 1,
angle = 0,
particles = [];
	for (var i = 0; i < maxParticles; i++) {
		particles.push({
			x: Math.random() * W, 
			y: Math.random() * H, 
			wh: Math.random() * maxParticleSize + minParticleSize
		})
	}
	
function draw() {
    ctx.clearRect(0, 0, W, H);
    ctx.beginPath();
		for (var i = 0; i < maxParticles; i++) {
			var p = particles[i];
			ctx.moveTo(p.x, p.y);
      ctx.rect(p.x, p.y, p.wh, p.wh);
      var radgrad = ctx.createRadialGradient(p.x + p.wh/2,p.y + p.wh/2,0,p.x + p.wh/2,p.y + p.wh/2,p.wh/2);
  radgrad.addColorStop(0, 'rgba(255, 255, 255, 1)');
  radgrad.addColorStop(0.5, 'rgba(255, 255, 255, .8)');
  radgrad.addColorStop(1, 'rgba(255,255,255,0)');
      ctx.fillStyle = radgrad;
      ctx.fill();
		}
		update();
	}
	
	function update() {
		angle += 0.01;
		for (var i = 0; i < maxParticles; i++) {
			var p = particles[i];
			p.y += Math.cos(angle) + p.wh/4;
			p.x += Math.sin(angle) * 2;
			if (p.x > W+maxMove || p.x < -maxMove || p.y > H) {
				if (i%3 > 0) {
					particles[i] = {x: Math.random() * W, y: -(maxMove), wh: p.wh };
				} else {
					if (Math.sin(angle) > 0) {
						particles[i] = {x: -maxMove, y: Math.random()*H, wh: p.wh };
					} else {
						particles[i] = {x: W+maxMove, y: Math.random()*H, wh: p.wh };
					}
				}
			}
		}
  requestAnimationFrame(draw);
	}
draw();

4. Kalo sudah jangan lupa disimpan, kemudian jalankan di browsernya, dan lihat hasilnya. Selesai

Cukup mudah bukan, Baik selesai sudah tutorial mengenai cara Membuat Efek Salju Dengan HTML 5 dan Javascript Pada Website, semoga bermanfaat, amin.

Selamat mencoba.