In this article, we will create an explosion animation using canvas in HTML.
Approach: At first, we have to create a canvas element in HTML and get its reference in JavaScript. All the elements and animations are controlled using JavaScript functions. Some steps required are:
- Use the canvas methods to get the canvas and the context.
- Decide the color, pattern, and gradient for text and particle objects.
- Decide and draw the shape for animation or frame rendering
- Clear the previous canvas.
- Save the canvas after transformations for the original state
- Restore the canvas before drawing a new frame
We can create many particles and animate them in random directions which fades out after some time.
Example:
HTML
<!DOCTYPE html> <html> <head> <title>Explosion Animation</title> </head> <body> <canvas id="myCanvas"></canvas> </body> </html> |
CSS
<style> * { padding: 0; margin: 0; box-sizing: border-box; ; } body { overflow: hidden; } </style> |
Javascript
<script> /* Get the canvas */ var canvas = document.getElementById("myCanvas"); /* Get the height and width of the window */ canvas.height = window.innerHeight; canvas.width = window.innerWidth; /* Get the 2D context of the canvas */ var ctx = canvas.getContext("2d"); /* Fills or sets the color,gradient,pattern */ ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = "50px Arial"; ctx.fillStyle = "green"; /* Writes the required text */ ctx.fillText("GFG", 500, 350) let particles = []; /* Initialize particle object */ 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'; /* Begins or reset the path for the arc created */ ctx.beginPath(); /* Some curve is created*/ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); /* Restore the recent canvas context*/ ctx.restore(); } update() { this.draw(); this.alpha -= 0.01; this.x += this.dx; this.y += this.dy; } } /* Timer is set for particle push execution in intervals*/ 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); /* Adds new items like particle*/ particles.push(particle); } explode(); }, 3000); /* Particle explosion function */ function explode() { /* Clears the given pixels in the rectangle */ 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() }) /* Performs a animation after request*/ requestAnimationFrame(explode); } </script> |
Output:
Explosion Animation
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
