把动画握在手里：用Canvas绘制交互式动画

2023-12-22 01:50:30

想象一下，当鼠标在屏幕上移动时，绘图工具上的线条可以跟随鼠标轨迹实时绘制；或者，当鼠标点击屏幕时，Canvas上的物体可以做出相应的反应。这就是交互式Canvas动画的魅力所在，它让动画更加生动、有趣。

本篇指南将引导您逐步实现一个交互式Canvas动画，我们以鼠标事件为例进行讲解。我们将学习如何在Canvas中使用addEventListener()方法来监听鼠标事件，并通过精心编写的代码让物体对鼠标事件做出相应反应。

首先，让我们了解一些基本概念。

Canvas：Canvas是一个HTML5元素，允许您使用JavaScript直接控制屏幕上的绘图。您可以使用Canvas创建各种各样的图形、图像和动画。
事件：事件是指用户与网页的交互行为，如鼠标点击、键盘输入等。当用户触发事件时，浏览器会向相应元素分发事件对象，包含有关事件的详细信息。
监听器：监听器是一个函数，当事件发生时执行。您可以使用addEventListener()方法将监听器附加到元素上。当事件触发时，浏览器会调用相应的监听器函数。

掌握这些基本概念后，让我们动手实现一个简单的交互式Canvas动画。

<!DOCTYPE html>
<html>
<head>
  
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 监听鼠标移动事件
    canvas.addEventListener('mousemove', function(e) {
      // 获取鼠标相对于Canvas左上角的坐标
      var x = e.clientX - canvas.offsetLeft;
      var y = e.clientY - canvas.offsetTop;

      // 绘制一个圆圈
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, 2 * Math.PI);
      ctx.fillStyle = 'red';
      ctx.fill();
    });
  </script>
</head>
<body>
</body>
</html>

在这个例子中，我们使用addEventListener()方法来监听Canvas的mousemove事件。当鼠标移动时，事件对象e将包含鼠标的坐标信息。我们使用这些信息来绘制一个圆圈，圆圈的位置跟随鼠标移动。

现在，让我们实现一个更复杂的动画，当鼠标点击Canvas时，改变Canvas中物体的位置。

<!DOCTYPE html>
<html>
<head>
  
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 监听鼠标点击事件
    canvas.addEventListener('click', function(e) {
      // 获取鼠标相对于Canvas左上角的坐标
      var x = e.clientX - canvas.offsetLeft;
      var y = e.clientY - canvas.offsetTop;

      // 创建一个矩形对象
      var rect = {
        x: x,
        y: y,
        width: 50,
        height: 50
      };

      // 绘制矩形
      ctx.fillStyle = 'blue';
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
    });
  </script>
</head>
<body>
</body>
</html>