Canvas交互设计：如何构建可点击的图形对象系统-H5教程-PHP中文网

canvas不保留图形对象，需自行结构化存储图形数据并实现命中检测；点击坐标须转换为canvas坐标系；每种图形需编写专属检测逻辑；响应应解耦，通过状态驱动重绘。

canvas交互设计：如何构建可点击的图形对象系统

Canvas本身不保留图形对象，画完即“丢”，所以构建可点击的图形系统，关键不是让Canvas记住图形，而是你自己管理图形数据，并在点击时主动做命中判断。

图形数据必须结构化存储

不能只靠ctx.fillRect()画完就不管——得为每个图形创建描述对象，包含位置、尺寸、类型等必要信息。比如：

矩形：{ type: 'rect', x: 100, y: 150, width: 80, height: 60 }
圆形：{ type: 'circle', cx: 200, cy: 200, r: 40 }
扇形：{ type: 'sector', cx: 300, cy: 250, r: 50, startAngle: 0, endAngle: Math.PI / 2 }

所有这类对象统一存进一个数组（如 shapes = []），后续点击检测就遍历它。

点击坐标要准确映射到Canvas坐标系

浏览器事件给的是页面坐标（clientX/clientY），而Canvas绘图用的是画布内部坐标。需做两步转换：

获取Canvas在页面中的真实位置（用 getBoundingClientRect()）
减去偏移量，并考虑设备像素比（window.devicePixelRatio）

简化写法示例：

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

function getCanvasPoint(canvas, evt) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  return {
    x: (evt.clientX - rect.left) * scaleX,
    y: (evt.clientY - rect.top) * scaleY
  };
}