2D Canvas点击时如何获取选中的矩形、圆形、图片等图形信息

Canvas是位图渲染模式，不会自动保留已绘制图形的对象信息，要实现点击获取对应图形，核心是自行维护图形数据列表+命中检测逻辑，以下是两种可直接落地的方案，适配你当前的代码场景和后续交互需求：

方案1：几何坐标判定（性能最优，适合基础图形场景） #

首先你需要把所有要绘制的图形统一存在一个数组中，每个图形对象保存类型、坐标、资源引用、以及后续旋转/缩放/偏移需要的所有属性，不要绘制完就丢弃图形参数。
绑定画布点击事件时，先获取点击点相对于画布的坐标（如果画布CSS尺寸和画布实际像素尺寸不一致，要按宽高比换算坐标避免偏移），倒序遍历图形列表（后绘制的图形在视觉顶层，优先判定），判断坐标是否落在图形范围内即可。
针对你当前代码里的三类图形，对应判定逻辑如下：

• 矩形/图片：两类图形都是以(x1,y1)为左上角、(x2-x1,y2-y1)为宽高绘制的矩形区域，直接用矩形边界判定即可

function isHitRect(clickX, clickY, x1, y1, x2, y2) {
  const minX = Math.min(x1, x2), maxX = Math.max(x1, x2)
  const minY = Math.min(y1, y2), maxY = Math.max(y1, y2)
  return clickX >= minX && clickX <= maxX && clickY >= minY && clickY <= maxY
}

• 椭圆（你当前用贝塞尔曲线绘制的图形）：你写的贝塞尔路径实际生成的是外接矩形为(x1,y1)-(x2,y2)的椭圆，用椭圆方程判定即可完全匹配绘制效果，不要用正圆半径判定避免点击偏差

function isHitOval(clickX, clickY, x1, y1, x2, y2) {
  const centerX = (x1 + x2) / 2, centerY = (y1 + y2) / 2
  const radiusX = Math.abs(x2 - x1) / 2, radiusY = Math.abs(y2 - y1) / 2
  // 满足椭圆方程即为命中
  return Math.pow(clickX - centerX, 2) / Math.pow(radiusX, 2) + Math.pow(clickY - centerY, 2) / Math.pow(radiusY, 2) <= 1
}

提示：如果后续给图形增加旋转、斜切等变换，几何判定需要先把点击坐标通过变换矩阵的逆矩阵转换回图形本地坐标系再做计算，逻辑复杂度会明显上升，这种场景更推荐用下面的方案2。

方案2：离屏Canvas颜色标记法（适配任意图形/变换，无需手写几何判定） #

这个方案不需要编写复杂的几何判定逻辑，哪怕后续添加不规则路径、旋转缩放斜切等变换都能100%匹配绘制效果，实现逻辑如下：

• 创建一个和主画布宽高完全一致的离屏画布，不需要插入页面，仅用于命中检测
• 每次主画布重绘时，同步在离屏画布绘制相同的图形：给每个图形分配一个唯一的RGB纯色值，在离屏画布上用这个纯色绘制对应图形（不需要描边、填充渐变、绘制图片内容，只要路径和变换逻辑和主画布完全一致即可）
• 点击画布时，读取离屏画布上点击坐标对应的像素颜色值，反向解析出颜色对应的图形索引，即可直接拿到命中的图形对象
  核心参考代码：

// 初始化离屏画布
const hitCanvas = document.createElement('canvas')
const hitCtx = hitCanvas.getContext('2d')
// 图形列表，保存所有要绘制的图形对象
const elementList = []

// 画布尺寸更新时同步离屏画布尺寸
function resizeCanvas(width, height) {
  mainCanvas.width = width
  mainCanvas.height = height
  hitCanvas.width = width
  hitCanvas.height = height
}

// 统一绘制方法，接收上下文和图形对象，保证主画布和离屏画布绘制路径/变换完全一致
function drawElement(ctx, el) {
  const {type, x1, y1, x2, y2, image} = el
  if (type === "rectangle"){
    ctx.strokeRect(x1, y1, x2 - x1, y2 - y1)
  } else if (type === "circle") {
    ctx.beginPath()
    ctx.moveTo(x1, y1 + (y2 - y1) / 2)
    ctx.bezierCurveTo(x1, y1, x2, y1, x2, y1 + (y2 - y1) / 2)
    ctx.bezierCurveTo(x2, y2, x1, y2, x1, y1 + (y2 - y1) / 2)
    ctx.closePath()
    ctx.fill()
    ctx.stroke()
  } else {
    ctx.drawImage(image, x1, y1, x2 - x1, y2 - y1)
  }
}

// 重绘方法
function redraw() {
  const mainCtx = mainCanvas.getContext('2d')
  // 清空画布
  mainCtx.clearRect(0, 0, mainCanvas.width, mainCanvas.height)
  hitCtx.clearRect(0, 0, hitCanvas.width, hitCanvas.height)

  elementList.forEach((el, index) => {
    // 主画布绘制正常显示的样式
    mainCtx.strokeStyle = 'black'
    drawElement(mainCtx, el)
    // 离屏画布绘制唯一纯色标记
    const r = index & 0xff
    const g = (index >> 8) & 0xff
    const b = (index >> 16) & 0xff
    hitCtx.fillStyle = `rgb(${r},${g},${b})`
    hitCtx.strokeStyle = `rgb(${r},${g},${b})`
    drawElement(hitCtx, el)
  })
}

// 绑定点击事件
mainCanvas.addEventListener('click', (e) => {
  const rect = mainCanvas.getBoundingClientRect()
  // 坐标换算，兼容CSS缩放场景
  const x = (e.clientX - rect.left) * (mainCanvas.width / rect.width)
  const y = (e.clientY - rect.top) * (mainCanvas.height / rect.height)
  // 读取离屏画布对应位置像素
  const [r, g, b] = hitCtx.getImageData(x, y, 1, 1).data
  const index = r | (g << 8) | (b << 16)
  const hitElement = elementList[index] || null
  if (hitElement) {
    // 拿到命中图形，后续可直接对其做旋转、移动、缩放操作
    console.log('命中图形：', hitElement)
  }
})

选型建议 #

• 如果只是基础图形、后续没有复杂变换需求，选方案1，性能开销最小
• 如果后续要实现复杂交互、添加不规则图形或各类变换，直接选方案2，维护成本更低，不会出现判定偏差
  画布效果示例：
  

内容的提问来源于stack exchange，提问作者NoviceWeb