Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Explosion Animation in Canvas
In this tutorial, we will learn to create an explosion animation effect using canvas in HTML. Canvas provides a powerful way to draw dynamic graphics and animations on web pages.
We'll explore two different approaches: a basic particle explosion and an interactive mouse-triggered explosion effect.
Basic Particle Explosion
This creates an explosion of 50 randomly colored particles that originate from the center of the canvas and move in random directions.
How It Works
The animation works by creating particle objects with position, velocity, and color properties. Each frame, we update particle positions and redraw them on the canvas.
Example
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 2px solid black;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="explosion" width="550" height="400"></canvas>
<script>
const canvas = document.getElementById('explosion');
const context = canvas.getContext('2d');
let particles = [];
// Creates particles at the center of the canvas
function createExplosion() {
for (let i = 0; i < 50; i++) {
particles.push({
x: canvas.width / 2,
y: canvas.height / 2,
radius: Math.random() * 3 + 1,
color: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.8)`,
velocityX: Math.random() * 20 - 10,
velocityY: Math.random() * 20 - 10
});
}
}
// Renders particles onto the canvas
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
context.beginPath();
context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
context.fillStyle = particle.color;
context.fill();
context.closePath();
});
}
// Updates particle positions
function update() {
particles.forEach(particle => {
particle.x += particle.velocityX;
particle.y += particle.velocityY;
});
}
// Main animation loop
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
createExplosion();
animate();
</script>
</body>
</html>
Interactive Mouse-Triggered Explosion
This creates a continuous explosion effect that follows mouse movement, with particles that shrink and disappear over time.
Key Features
Mouse tracking: Particles spawn at mouse position
Dynamic colors: Uses HSL color space for smooth color transitions
Particle lifecycle: Particles shrink and are removed automatically
Responsive canvas: Adjusts to window size
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
background: #000;
overflow: hidden;
}
#mCanvas {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
</head>
<body>
<canvas id="mCanvas"></canvas>
<script>
const canvas = document.getElementById('mCanvas');
const ctx = canvas.getContext('2d');
const particlesArray = [];
let hue = 0;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
window.addEventListener('resize', function() {
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
});
const mouse = {
x: undefined,
y: undefined
};
class Particle {
constructor() {
this.x = mouse.x;
this.y = mouse.y;
this.size = Math.random() * 10 + 1;
this.speedX = Math.random() * 3 - 1.5;
this.speedY = Math.random() * 3 - 1.5;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.3) {
this.size -= 0.1;
}
}
draw() {
ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function handleParticles() {
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
particlesArray[i].draw();
if (particlesArray[i].size <= 0.3) {
particlesArray.splice(i, 1);
i--;
}
}
}
function animate() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
handleParticles();
hue++;
requestAnimationFrame(animate);
}
animate();
canvas.addEventListener('mousemove', function(event) {
mouse.x = event.x;
mouse.y = event.y;
for (let i = 0; i < 5; i++) {
particlesArray.push(new Particle());
}
});
</script>
</body>
</html>
Comparison
| Feature | Basic Explosion | Mouse-Triggered |
|---|---|---|
| Trigger | Automatic on load | Mouse movement |
| Particle lifecycle | Permanent | Shrink and disappear |
| Colors | Random RGB | Dynamic HSL |
| Interactivity | None | Follows mouse |
Key Implementation Points
requestAnimationFrame: Ensures smooth 60fps animation
Particle management: Remove particles when they become too small to optimize performance
Color systems: RGB for static colors, HSL for smooth color transitions
Canvas clearing: Use clearRect() for complete refresh or semi-transparent overlay for trail effects
Conclusion
Canvas explosion animations combine particle physics with visual effects to create engaging graphics. The basic approach uses simple particle systems, while interactive versions add mouse tracking and dynamic color changes for more sophisticated effects.
2K+ Views
