jQuery | mousemove() 示例

介绍

mousemove() 是 jQuery 提供的一个事件方法，用于捕获鼠标移动时的事件，并触发相应的响应函数。本示例将演示如何使用 mousemove() 方法来实现一个类似于画板的小工具，可以用鼠标在屏幕上涂鸦。

实现步骤

创建 HTML 结构

首先，我们需要在 HTML 中创建一个 <canvas> 元素，用于作为画布，并设置它的大小和其他样式属性：

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

编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现以下功能：

1. 获取 <canvas> 元素，并创建一个 2D 绘图上下文对象；
2. 定义一个变量 isDrawing，用于标识当前是否在绘画状态；
3. 定义一个函数 startDrawing()，用于开启绘画状态，并保存当前鼠标位置；
4. 定义一个函数 draw()，用于实际绘画操作，并保存当前鼠标位置；
5. 定义一个函数 stopDrawing()，用于停止绘画状态；
6. 绑定 mousemove 事件处理函数，当鼠标在 <canvas> 元素上移动时，进行绘画操作；
7. 绑定 mousedown 事件处理函数，当鼠标在 <canvas> 元素上按下时，开启绘画状态；
8. 绑定 mouseup 事件处理函数，当鼠标在 <canvas> 元素上释放时，停止绘画状态。

// 获取 canvas 元素和 2D 绘图上下文对象
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 定义变量和函数
var isDrawing = false;
var lastX = 0, lastY = 0;

function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e) {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
  isDrawing = false;
}

// 绑定事件处理函数
$(canvas).on('mousedown', startDrawing);
$(canvas).on('mousemove', draw);
$(canvas).on('mouseup', stopDrawing);

测试效果

保存并运行页面后，用鼠标在画布上移动，即可看到画布上实时绘制的涂鸦轨迹。

注意事项

1. mousemove() 事件处理函数会在鼠标移动时频繁触发，因此绘画操作需要放在该函数的内部；
2. 由于涂鸦轨迹需要是实时绘制的，在 mousemove() 事件处理函数中需使用 ctx.beginPath() 方法创建新路径，否则轨迹会直接连成一条线；
3. mousemove() 事件对象中的 offsetX 和 offsetY 属性用于获取当前鼠标在元素内的偏移位置，应用于绘画时即可获取鼠标在画布上的绘制位置；
4. 由于涂鸦轨迹需随鼠标移动而绘制，因此需要保存上一次鼠标位置，以便下一次绘画时使用。