In this article, we will create a basic explosion animation using HTML Canvas. For this, we will follow the below approach for making the Explosion Animation.
Approach
The below approach will be followed to create the Explosion Animation in Canvas:
- Create the basic <canvas> & assign an id with the value as myCanvas.
- For adding the styling, use the padding, margin, & box-sizing while setting the value as border-box. Add the styling to the body & use the overflow Property & set its value as hidden.
- In JavaScript, use the canvas methods to get the canvas and the context. Now, set the canvas dimensions to match the window’s height and width.
- Sets the font size and color for the text “GFG” to be displayed later.
- Defines a Particle class with properties like position (x and y), radius, speed (dx and dy), and transparency (alpha).
- Here, the draw method renders the particle on the canvas as a filled green circle with a decreasing alpha value for a fading effect.
- After a delay of 3 seconds (setTimeout), it generates 150 particles with random initial properties and adds them to the particle array.
- Uses requestAnimationFrame to create a smooth animation loop, calling the explode function repeatedly.
- We can create many particles and animate them in random directions which fades out after some time.
Example: This example illustrates the creation of the basic Explosion Animation in Canvas.
HTML
<!DOCTYPE html><html>
<head>
<title>Canvas Explosion Animation</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
|
CSS
/* style.css */* { padding: 0;
margin: 0;
box-sizing: border-box;
;
}body { overflow: hidden;
} |
Javascript
// script.js/* 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);
} |
Output:
Explosion Animation