移动画布笔刷

在移动画布上绘制时，可以使用鼠标的移动事件来实现移动画布笔刷的效果。以下是一个示例代码，演示了如何使用鼠标移动事件来绘制和移动画布笔刷。

// 获取画布元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 定义画笔大小和颜色
let brushSize = 10;
let brushColor = 'black';

// 定义画布的初始位置
let canvasX = 0;
let canvasY = 0;

// 定义鼠标是否按下的标志位
let isMouseDown = false;

// 监听鼠标按下事件
canvas.addEventListener('mousedown', (e) => {
  isMouseDown = true;
  // 更新画布起始位置为鼠标点击位置
  canvasX = e.clientX;
  canvasY = e.clientY;
});

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
  if (isMouseDown) {
    // 计算鼠标移动距离
    const dx = e.clientX - canvasX;
    const dy = e.clientY - canvasY;
    
    // 更新画布起始位置为当前鼠标位置
    canvasX = e.clientX;
    canvasY = e.clientY;
    
    // 移动画布
    ctx.translate(dx, dy);

    // 绘制画布笔刷
    ctx.fillStyle = brushColor;
    ctx.beginPath();
    ctx.arc(e.clientX, e.clientY, brushSize, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
  }
});

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

// 监听鼠标离开事件
canvas.addEventListener('mouseleave', () => {
  isMouseDown = false;
});

在上面的示例代码中，我们首先获取了画布元素，并设置了其宽度和高度。然后定义了画笔的大小和颜色。接着定义了画布的初始位置和鼠标按下的标志位。

通过监听鼠标按下、移动、松开和离开事件，我们可以实现在画布上绘制和移动画布笔刷的效果。

在鼠标按下事件中，我们更新了画布起始位置为鼠标点击位置。在鼠标移动事件中，我们计算了鼠标移动的距离，并更新了画布起始位置为当前鼠标位置。然后使用ctx.translate()方法移动画布，并绘制了画布笔刷。

最后，在鼠标松开和离开事件中，我们将鼠标按下的标志位设置为false，表示鼠标已经松开，停止绘制和移动画布笔刷。