canvas框选矩形

要在Canvas中实现框选矩形的功能，你可以按照以下步骤进行操作：

1. 在HTML中创建一个Canvas元素：

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

2. 在JavaScript中获取Canvas元素的引用，并获取绘图上下文：

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

3. 定义变量来存储框选矩形的起始点和结束点的坐标：

let startX, startY, endX, endY;
let isDrawing = false;

4. 监听鼠标按下、移动和松开事件，并实现相应的事件处理函数：

canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);

function handleMouseDown(event) {
  startX = event.clientX - canvas.offsetLeft;
  startY = event.clientY - canvas.offsetTop;
  isDrawing = true;
}

function handleMouseMove(event) {
  if (!isDrawing) return;
  endX = event.clientX - canvas.offsetLeft;
  endY = event.clientY - canvas.offsetTop;
  drawRectangle();
}

function handleMouseUp(event) {
  isDrawing = false;
  // 在松开鼠标时绘制最终的矩形
  endX = event.clientX - canvas.offsetLeft;
  endY = event.clientY - canvas.offsetTop;
  drawRectangle();
}

5. 实现绘制矩形的函数：

function drawRectangle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.beginPath();
  const width = endX - startX;
  const height = endY - startY;
  ctx.rect(startX, startY, width, height);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.stroke();
}

通过以上步骤，你就可以在Canvas上实现框选矩形的功能了。当鼠标按下并移动时，会在画布上绘制出随着鼠标移动而变化的矩形框，当松开鼠标时，会绘制最终的矩形框。