Explosion Animation in Canvas

0 0 2 minutes read

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, zambiatek 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!