HTML 画布中的爆炸动画

在本教程中，我们将学习如何使用HTML中的画布(canvas)创建一个爆炸动画效果。使用画布，我们可以在网页上以一种简单而强大的方式绘制图形。

让我们看一些使用画布创建爆炸动画的示例。

爆炸动画1

我们将创建一个由50个随机颜色粒子组成的爆炸效果，这些粒子起源于画布的中心，并在随机方向上移动。这些粒子将继续移动，直到页面刷新。

步骤

步骤1 - 创建一个id为”explosion”的HTML画布元素，并将其尺寸设置为400×400像素。
步骤2 - 初始化一个粒子数组来存储粒子对象，以及一个用于画布元素的2D渲染上下文。
步骤3 - 定义一个名为createExplosion()的函数，将50个粒子对象推入粒子数组中。每个粒子对象都有x和y位置、半径、颜色、水平速度和垂直速度的属性。x和y位置以及颜色设置为随机值，半径和速度设置为特定范围内的随机数。
步骤4 - 定义一个名为draw()的函数，清除画布并遍历粒子数组，使用粒子的属性绘制每个粒子的圆形。
步骤5 - 定义一个名为update()的函数，遍历粒子数组并根据其速度更新每个粒子的x和y位置。
步骤6 - 定义一个名为animate()的函数，调用update()和draw()函数，然后使用requestAnimationFrame再次调用自身。
步骤7 - 调用createExplosion()函数初始化粒子数组。
步骤8 - 调用animate()函数开始动画。

示例

在下面的示例中，我们正在创建运动的错觉。我们通过动画循环不断改变粒子的属性，并在画布上持续绘制和更新它。

<html>
<head>
   <style>
      canvas {
         border: 2px solid black;
      }
   </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 a new particle 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)})`,
               velocityX: Math.random() * 20 - 10,
               velocityY: Math.random() * 20 - 10
            });
         }
      }

      // Renders the 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 the positions of the particles
      function update() {
         particles.forEach(particle => {
            particle.x += particle.velocityX;
            particle.y += particle.velocityY;
         });
      }
      // The main animation loop
      function animate() {
         update();
         draw();
         requestAnimationFrame(animate);
      }
      createExplosion();
      animate();
   </script>
</body>
</html>

爆炸动画2

我们将使用事件监听器来检测鼠标移动。当检测到鼠标移动事件时，我们将更新鼠标对象的x和y位置，并将五个新的粒子对象推入数组中。这样，它看起来就像是一个爆炸。

步骤

步骤1 - 初始化以下变量 –
- canvas - 带有 id “mCanvas” 的画布元素
- ctx - 用于画布的 2D 渲染上下文
- particlesArray - 用于存储粒子对象的空数组
- hue – 初始化为 0 的变量
步骤2 - 将画布元素的高度和宽度分别设置为窗口的内部高度和宽度。
步骤3 - 向窗口对象添加一个调整大小的事件监听器，以在窗口调整大小时更新画布元素的高度和宽度。
- 步骤4 - 用属性x和y都设置为undefined初始化鼠标对象。
- 步骤5 - 定义一个Particles类，具有以下方法：
- 步骤5.1 - constructor() 为每个particle对象设置以下属性：
x - 鼠标对象的当前x位置
y - 鼠标对象的当前y位置
size - 一个介于1和10之间的随机数
speedX - 一个介于-1.5和1.5之间的随机数
speedY - 一个介于-1.5和1.5之间的随机数
- 步骤5.2 − update(); 该方法通过speedX和speedY的值，分别增加粒子的x和y位置。如果粒子的大小大于0.3，则减小0.1。
- 步骤5.3 − draw(); 该方法将ctx对象的填充样式设置为使用色调-饱和度-亮度(HSL)颜色空间中的色调值，并将圆形路径填充，以粒子的x和y位置作为中心，粒子的大小作为半径。
- 步骤6 − 定义一个handleParticles()函数来遍历particlesArray数组。对于数组中的每个粒子，调用其update和draw方法。如果粒子的大小小于或等于0.3，则从数组中移除它。
- 步骤7 - 定义一个animate()函数，用一个半透明的黑色矩形填充画布元素，处理particlesArray中的粒子，并递增hue值。
- 步骤8 - 使用requestAnimationFrame调用animate()函数。
- 步骤9 - 为画布元素添加一个mousemove事件监听器。当检测到mousemove事件时，更新鼠标对象的x和y属性，并将五个新的粒子对象推送到particlesArray中。

示例

在下面的示例中，我们将创建一个爆炸动画，该动画将在鼠标移动时执行。我们可以通过使用事件监听器来实现这一点。

<html>
<head>
   <style>
      body {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
         background: #000;
      }
      #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 Particles{
         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 > .3){
               this.size -= .1;
            }
         }
         draw(){
            ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
         }
      } // end Particle
      function handleParticles(){
         for(let i=0 ; i<particlesArray.length ; i++){
            particlesArray[i].update();
            particlesArray[i].draw();
            if(particlesArray[i].size <= .3){
               particlesArray.splice(i, 1);
               i--;
            }
         }
      } // end of function
      function animate(){
         ctx.fillStyle = 'rgba(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 Particles());
         }
      })
   </script>
</body>
</html>

我们用canvas元素创建了一个爆炸效果。当鼠标移动到canvas上时，页面会创建新的粒子对象并将它们添加到数组中。粒子具有随机的位置、大小和速度，并使用随时间变化的色调值在canvas上绘制。粒子在移动时逐渐缩小，并在其尺寸变得足够小时从数组中移除。页面使用requestAnimationFrame函数不断重绘canvas，以创建动画效果。页面还在窗口调整大小时更新canvas元素的尺寸。

我们已经学会了在canvas中创建不同的爆炸动画效果。