HTML 画布中的爆炸动画

在本文中，我们将使用HTML的canvas元素创建一个爆炸动画。

过程： 首先，在HTML中创建一个canvas元素并在JavaScript中获取其引用。所有元素和动画都由JavaScript函数控制。需要执行的一些步骤是：

使用canvas方法获取canvas和上下文。
为文本和粒子对象决定颜色、图案和渐变。
确定并绘制动画或帧渲染的形状。
清除先前的画布。
在变换后保存画布以保持原始状态。
在绘制新帧之前恢复画布。
我们可以创建许多粒子并以随机方向进行动画，随着时间的推移逐渐消失。

示例：

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

输出：

HTML 画布中的爆炸动画