用HTML5 Canvas亲手打造跳动的粒子动画，让画布上一系列粒子自由漫舞

2023-05-08 10:40:53

粒子动画：让你的网页动起来

引言

在现代网络世界中，静态网页已无法满足人们的需求。随着技术的不断进步，动态效果在网页设计中变得越来越普遍，其中粒子动画就是一种非常流行的效果。粒子动画可以为网页增添活泼、有趣的气息，让用户获得更加身临其境的体验。

粒子动画的原理

粒子动画的实现原理并不复杂。它通过在画布（Canvas）上绘制一系列粒子，然后根据一定的规则让这些粒子运动来实现。Canvas 是 HTML5 中的一个元素，可以用来在网页上绘制图形。JavaScript 是一种编程语言，可以用来编写 Canvas 的绘图代码。

如何绘制粒子

要绘制一个粒子，可以使用以下 JavaScript 代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 绘制一个粒子
function drawParticle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 2, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
}

如何让粒子运动

让粒子运动的代码如下：

// 让粒子运动
function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    // 更新粒子的位置
    particles[i].x += particles[i].vx;
    particles[i].y += particles[i].vy;

    // 检测粒子是否超出画布范围
    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].vx *= -1;
    }
    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].vy *= -1;
    }
  }
}

如何让粒子相互作用

如果想让粒子相互作用，可以使用以下代码：

// 让粒子相互作用
function handleCollisions() {
  for (var i = 0; i < particles.length; i++) {
    for (var j = i + 1; j < particles.length; j++) {
      // 计算两个粒子之间的距离
      var dx = particles[i].x - particles[j].x;
      var dy = particles[i].y - particles[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);

      // 如果两个粒子之间的距离小于一定值，则让它们相互作用
      if (distance < 100) {
        // 计算两个粒子之间的作用力
        var force = (100 / (distance * distance)) * (particles[i].mass + particles[j].mass);

        // 计算两个粒子之间的作用力方向
        var angle = Math.atan2(dy, dx);

        // 计算两个粒子之间的作用力大小
        var magnitude = force * (particles[i].mass / (particles[i].mass + particles[j].mass));

        // 更新两个粒子的速度
        particles[i].vx += magnitude * Math.cos(angle);
        particles[i].vy += magnitude * Math.sin(angle);
        particles[j].vx -= magnitude * Math.cos(angle);
        particles[j].vy -= magnitude * Math.sin(angle);
      }
    }
  }
}

如何渲染粒子动画

要渲染粒子动画，可以使用以下代码：

// 渲染粒子动画
function renderParticles() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制所有粒子
  for (var i = 0; i < particles.length; i++) {
    drawParticle(particles[i].x, particles[i].y);
  }
}

实现一个带跳动效果的粒子动画

为了实现一个带跳动效果的粒子动画，可以在让粒子运动的代码中添加一个随机数，让粒子的速度在一定范围内随机变化。这样，粒子就会看起来像是在跳动一样。

// 让粒子运动
function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    // 更新粒子的位置
    particles[i].x += particles[i].vx + Math.random() * 2 - 1;
    particles[i].y += particles[i].vy + Math.random() * 2 - 1;

    // 检测粒子是否超出画布范围
    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].vx *= -1;
    }
    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].vy *= -1;
    }
  }
}

完整的代码示例

完整的粒子动画代码如下：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 创建粒子数组
var particles = [];

// 创建100个粒子
for (var i = 0; i < 100; i++) {
  var particle = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    mass: Math.random() * 10
  };

  particles.push(particle);
}

// 让粒子运动
function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    // 更新粒子的位置
    particles[i].x += particles[i].vx + Math.random() * 2 - 1;
    particles[i].y += particles[i].vy + Math.random() * 2 - 1;

    // 检测粒子是否超出画布范围
    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].vx *= -1;
    }
    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].vy *= -1;
    }
  }
}

// 让粒子相互作用
function handleCollisions() {
  for (var i = 0; i < particles.length; i++) {
    for (var j = i + 1; j < particles.length; j++) {
      // 计算两个粒子之间的距离
      var dx = particles[i].x - particles[j].x;
      var dy = particles[i].y - particles[j].y;
      var distance = Math.sqrt(dx * dx + dy * dy);

      // 如果两个粒子之间的距离小于一定值，则让它们相互作用
      if (distance < 100) {
        // 计算两个粒子之间的作用力
        var force = (100 / (distance * distance)) * (particles[i].mass + particles[j].mass);

        // 计算两个粒子之间的作用力方向
        var angle = Math.atan2(dy, dx);

        // 计算两个粒子之间的作用力大小
        var magnitude = force * (particles[i].mass / (particles[i].mass + particles[j].mass));

        // 更新两个粒子的速度
        particles[i].vx += magnitude * Math.cos(angle);
        particles[i].vy += magnitude * Math.sin(angle);
        particles[j].vx -= magnitude * Math.cos(angle);
        particles[j].vy -= magnitude * Math.sin(angle);
      }
    }
  }
}

// 渲染粒子动画
function renderParticles() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制所有粒子
  for (var i = 0; i < particles.length; i++) {
    drawParticle(particles[i].x, particles[i].y);
  }
}

// 绘制一个粒子
function drawParticle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 2, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
}

// 运行游戏循环
function gameLoop() {
  updateParticles();
  handleCollisions();
  renderParticles();

  requestAnimationFrame(gameLoop);
}

gameLoop();