Canvas眼球紧盯鼠标的秘密

2023-12-13 00:05:37

前言

你好，又见面了，我是技术博客创作者——「织梦者」。今天，我想向你展示一个有趣的Canvas动画效果。我们可以利用Canvas创建一个眼球，当鼠标移动时，眼球会随着鼠标移动而注视。这不仅是一个有趣的效果，而且也是一个很好的方式来学习如何使用Canvas来创建动画。

开始吧

1. 创建一个新的Canvas

首先，我们需要创建一个新的Canvas元素。我们可以通过以下代码来做到这一点：

<canvas id="canvas" width="500" height="500"></canvas>

这将在页面中创建一个具有500像素宽和500像素高的Canvas元素。

2. 获取Canvas的上下文

接下来，我们需要获取Canvas的上下文。上下文是一个对象，它允许我们与Canvas进行交互。我们可以通过以下代码来获取上下文：

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

3. 绘制眼球

现在，我们可以开始绘制眼球了。我们可以使用以下代码来做到这一点：

ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();

这将在Canvas的中心绘制一个白色的圆圈。这就是我们的眼球。

4. 绘制瞳孔

接下来，我们需要绘制瞳孔。我们可以使用以下代码来做到这一点：

ctx.beginPath();
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

这将在眼球的中心绘制一个黑色的圆圈。这就是我们的瞳孔。

5. 添加事件监听器

现在，我们需要添加一个事件监听器来监听鼠标移动事件。当鼠标移动时，我们需要更新眼球的位置，使其注视鼠标。我们可以使用以下代码来做到这一点：

canvas.addEventListener('mousemove', (e) => {
  const x = e.clientX;
  const y = e.clientY;

  // 计算眼球的中心位置
  const eyeX = x - canvas.offsetLeft;
  const eyeY = y - canvas.offsetTop;

  // 更新眼球的位置
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(eyeX, eyeY, 100, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
});

6. 运行代码

现在，我们就可以运行代码了。我们可以使用以下代码来做到这一点：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

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

    ctx.beginPath();
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(250, 250, 50, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    canvas.addEventListener('mousemove', (e) => {
      const x = e.clientX;
      const y = e.clientY;

      const eyeX = x - canvas.offsetLeft;
      const eyeY = y - canvas.offsetTop;

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(eyeX, eyeY, 100, 0, 2 * Math.PI);
      ctx.fillStyle = 'white';
      ctx.fill();
    });
  </script>
</body>
</html>