使用鼠标在canvas中的图片上绘制矩形

您可以使用HTML5的Canvas元素和JavaScript来实现在图片上绘制矩形的功能。下面是一个简单的示例代码：

HTML代码：

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

JavaScript代码：

// 获取Canvas元素和上下文
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

// 加载图片
let img = new Image();
img.src = "path/to/image.jpg";
img.onload = function() {
  // 将图片绘制到Canvas上
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 绑定鼠标事件，监听鼠标按下、移动和松开事件
  let isDrawing = false;
  let startX, startY;

  canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    startX = e.offsetX;
    startY = e.offsetY;
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!isDrawing) return;
    let currentX = e.offsetX;
    let currentY = e.offsetY;

    // 清除Canvas上之前的矩形
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    // 绘制当前的矩形
    let width = currentX - startX;
    let height = currentY - startY;
    ctx.strokeStyle = 'red';
    ctx.strokeRect(startX, startY, width, height);
  });

  canvas.addEventListener('mouseup', (e) => {
    isDrawing = false;
  });
}

这段代码会先加载一张图片，并将其绘制到Canvas上。然后监听鼠标事件，并在鼠标移动时绘制一个矩形，直到鼠标松开停止绘制。注意要在绘制新的矩形之前清除之前绘制的矩形，否则会出现重叠的情况。