图像反应 - Javascript

简介

图像反应是一种将用户输入转化为图像反馈的技术，通常应用在游戏中或其他需要即时反馈的应用中。在 JavaScript 中，我们可以使用 Canvas 来实现图像反应。

实现

准备工作

首先，我们需要在 HTML 中添加一个 Canvas 元素。

<canvas id="canvas"></canvas>

然后，在 JavaScript 中获取这个元素。

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

绘制图像

接下来，我们需要绘制一个图像作为反馈。在这个例子中，我们绘制一个简单的圆形。

ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();

其中，x、y、r 分别为圆心的横、纵坐标和半径，fillStyle 为填充颜色。

添加交互

我们可以添加鼠标移动事件来实现交互。在这个例子中，我们可以在鼠标移动时绘制圆形。具体实现如下：

canvas.addEventListener("mousemove", (event) => {
  const x = event.clientX;
  const y = event.clientY;
  const r = 10;
  
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
});

清空画布

我们需要在每次绘制前清空画布，否则会出现多个图案叠在一起的情况。可以使用以下代码清空画布：

ctx.clearRect(0, 0, canvas.width, canvas.height);

完整代码

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

canvas.addEventListener("mousemove", (event) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const x = event.clientX;
  const y = event.clientY;
  const r = 10;

  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
});

结语

图像反应是一种很有趣的技术，可以为用户带来更好的交互体验。在这个例子中，我们使用 Canvas 绘制了一个简单的圆形，实现了鼠标移动时的即时反馈。