前端实现鼠标连点功能：简单易懂的代码示例

这里是一个简单的鼠标连点功能的前端实现：

HTML：

<div id='canvas'></div>

CSS：

#canvas {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

JavaScript：

// 获取画布
const canvas = document.getElementById('canvas');
// 获取画笔
const ctx = canvas.getContext('2d');
// 记录上一个点的坐标
let lastX = 0, lastY = 0;
// 是否正在画线
let isDrawing = false;

// 监听鼠标按下事件
canvas.addEventListener('mousedown', function(event) {
  isDrawing = true;
  [lastX, lastY] = [event.offsetX, event.offsetY];
});

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    // 绘制连线
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
    // 更新上一个点的坐标
    [lastX, lastY] = [event.offsetX, event.offsetY];
  }
});

// 监听鼠标松开事件
canvas.addEventListener('mouseup', function() {
  isDrawing = false;
});

这个例子中，我们使用 canvas 元素来模拟画布，通过鼠标按下、移动和松开事件来实现鼠标连点的功能。在鼠标按下事件中，我们记录下鼠标的起始坐标，然后在鼠标移动事件中不断绘制连线，并更新上一个点的坐标。在鼠标松开事件中，我们停止绘制连线。