var
canvas = document.getElementById(
"myCanvas"
);
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var
ctx = canvas.getContext(
"2d"
);
ctx.fillStyle =
"white"
;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font =
"50px Arial"
;
ctx.fillStyle =
"green"
;
ctx.fillText(
"GFG"
, 500, 350)
let particles = [];
class Particle {
constructor(x, y, radius, dx, dy) {
this
.x = x;
this
.y = y;
this
.radius = radius;
this
.dx = dx;
this
.dy = dy;
this
.alpha = 1;
}
draw() {
ctx.save();
ctx.globalAlpha =
this
.alpha;
ctx.fillStyle =
'green'
;
ctx.beginPath();
ctx.arc(
this
.x,
this
.y,
this
.radius,
0, Math.PI * 2,
false
);
ctx.fill();
ctx.restore();
}
update() {
this
.draw();
this
.alpha -= 0.01;
this
.x +=
this
.dx;
this
.y +=
this
.dy;
}
}
setTimeout(() => {
for
(i = 0; i <= 150; i++) {
let dx = (Math.random() - 0.5) * (Math.random() * 6);
let dy = (Math.random() - 0.5) * (Math.random() * 6);
let radius = Math.random() * 3;
let particle =
new
Particle(575, 375, radius, dx, dy);
particles.push(particle);
}
explode();
}, 3000);
function
explode() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle =
"white"
;
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach((particle, i) => {
if
(particle.alpha <= 0) {
particles.splice(i, 1);
}
else
particle.update()
})
requestAnimationFrame(explode);
}