canvas中普通动效与粒子动效的实现 方法介绍+代码示例

普通动效的实现方法

要在canvas中实现普通动效，可以通过更新和重绘canvas中的图形来实现动画效果。下面是一个简单的示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let posX = 0;
let posY = 0;
let velocityX = 1;
let velocityY = 1;

function draw() {
  // 清除canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制图形
  ctx.fillRect(posX, posY, 50, 50);
  
  // 更新坐标
  posX += velocityX;
  posY += velocityY;
  
  // 边界检测
  if (posX + 50 > canvas.width || posX < 0) {
    velocityX = -velocityX;
  }
  if (posY + 50 > canvas.height || posY < 0) {
    velocityY = -velocityY;
  }
  
  // 重绘
  requestAnimationFrame(draw);
}

draw();

粒子动效的实现方法

要实现粒子动效，可以使用一个数组来存储粒子的信息，并在每一帧更新每个粒子的位置和其他属性。以下是一个简单的粒子动效的示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = [];

function Particle(x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.velocityX = Math.random() * 2 - 1;
  this.velocityY = Math.random() * 2 - 1;

  this.update = function() {
    this.x += this.velocityX;
    this.y += this.velocityY;
    this.radius -= 0.02;
    if (this.radius > 0) {
      this.draw();
    }
  }

  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.fill();
    ctx.closePath();
  }
}

function createParticles() {
  const x = canvas.width / 2;
  const y = canvas.height / 2;
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle(x, y, 10));
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    if (particles[i].radius <= 0) {
      particles.splice(i, 1);
      i--;
    }
  }
  requestAnimationFrame(draw);
}

createParticles();
draw();

代码解释

上述的普通动效代码中，我们首先获取canvas元素和上下文对象，然后定义了图形的初始位置和速度。在draw()函数中，我们使用ctx.clearRect()方法清除canvas，并使用ctx.fillRect()方法绘制一个矩形。然后更新图形的位置，并检查是否触碰到了边界，如果触碰到了，则反转速度。最后，使用requestAnimationFrame()函数来循环调用draw()函数，实现动画效果。

粒子动效代码中，我们创建了一个Particle构造函数，用于创建粒子对象。每个粒子具有位置、半径和速度属性，并且有一个更新函数用于更新粒子的位置和半径。在draw()函数中，我们清除canvas并遍历粒子数组，更新和绘制每个粒子。如果粒子的半径小于等于0，则从数组中移除。最后，和普通动效一样，使用requestAnimationFrame()函数来循环调用draw()函数。

总结

普通动效的实现方法是通过更新和重绘canvas中的图形来实现动画效果。而粒子动效的实现方法是使用数组存储粒子的信息，并在每一帧更新每个粒子的位置和属性。通过上述代码示例，我们可以看到两种动效的基本实现思路。根据具体需求，我们可以进一步扩展和改进代码，实现更丰富、复杂的动画效果。