用<canvas>绘就交互：巧用事件操作，让创意飞扬

前端

2023-09-04 08:17:43

与画布的互动：通过事件开启创意大门

在网页设计的世界中，canvas 元素提供了无限的可能性，它是一个空白画布，等待着你用交互性和动态性填充。事件在 canvas 的世界里扮演着至关重要的角色，为我们提供了与用户互动、打造身临其境的体验的窗口。

鼠标事件：用画笔书写互动

鼠标事件是 canvas 交互中最普遍的形式。通过鼠标按钮和光标移动，用户可以与画布上的元素直接交互。以下是五种基本的鼠标事件：

mousedown： 鼠标按钮按下。
mousemove： 鼠标指针在画布上移动。
mouseup： 鼠标按钮释放。
dblclick： 鼠标双击。
contextmenu： 鼠标右键按下。

鼠标事件可以触发各种动作，如绘画、改变颜色，甚至放大缩小画布。利用鼠标事件的灵活性，你可以让 canvas 上的图形与用户产生实时互动。

键盘事件：用按键敲击出变化

键盘事件提供了另一种与 canvas 交互的方式，用户可以通过按键触发特定的动作。canvas 支持三种基本的键盘事件：

keydown： 按下某个键。
keyup： 释放某个键。
keypress： 按下并释放某个键。

键盘事件可以触发各种操作，如在画布上移动对象、更改画布大小等。通过巧妙地利用键盘事件，你可以让 canvas 上的图形随着用户的按键而变化，为你的设计增添动态性。

循环事件：让画布动起来

循环事件是一类特殊类型的事件，它们允许用户持续不断地与画布交互。canvas 支持两种基本的循环事件：

requestAnimationFrame： 浏览器每隔一定时间（通常为 16 毫秒）触发该事件。
setInterval： 浏览器每隔一定时间（由用户指定）触发该事件。

循环事件非常适合创建动态的、不断变化的视觉效果。例如，你可以让画布上的图形移动、旋转或缩放。通过巧妙地利用循环事件，你可以让你的 canvas 设计栩栩如生。

实例：飞舞的粒子，一个交互式奇迹

为了展示事件操作的强大功能，让我们创建一个交互式的飞舞粒子动画。当用户移动鼠标时，粒子会随着鼠标移动而飘动。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

JavaScript 代码：

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

// 创建粒子类
class Particle {
  constructor(x, y, vx, vy, radius, color) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.radius = radius;
    this.color = color;
  }

  // 绘制粒子
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  // 更新粒子位置
  update() {
    this.x += this.vx;
    this.y += this.vy;

    // 反弹边界
    if (this.x < 0 || this.x > canvas.width) {
      this.vx = -this.vx;
    }
    if (this.y < 0 || this.y > canvas.height) {
      this.vy = -this.vy;
    }
  }
}

// 创建粒子数组
const particles = [];
for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const vx = Math.random() * 5 - 2.5;
  const vy = Math.random() * 5 - 2.5;
  const radius = Math.random() * 5 + 1;
  const color = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`;

  particles.push(new Particle(x, y, vx, vy, radius, color));
}

// 鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // 根据鼠标位置更新粒子
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];

    particle.vx = (x - particle.x) / 10;
    particle.vy = (y - particle.y) / 10;
  }
});

// 动画循环
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 更新并绘制粒子
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];

    particle.update();
    particle.draw();
  }

  // 循环调用
  requestAnimationFrame(animate);
}

// 启动动画
animate();