Canvas 图形绘制工具：全模式文本标注功能实现

在数据可视化和图形编辑场景中，为图形添加精准的文本标注是一项常见需求。本文将介绍如何使用 HTML5 Canvas API 开发一个支持多种图形绘制且每种模式都能独立添加文本标注的工具，实现图形与标注的联动管理。

功能概述

这个 Canvas 图形工具具有以下特性：

• 支持矩形、多边形、直线和点四种基本图形绘制
• 所有绘制模式均可实时添加文本标注
• 每个图形的标注内容、颜色和大小可独立设置
• 支持图形选择、移动、样式修改和删除操作
• 文本标注与图形保持联动，移动图形时标注自动跟随

核心实现思路

1. 整体结构设计

工具界面主要由四部分组成：

• 模式选择区：用于切换不同的绘制模式
• 样式控制区：用于调整图形的边框、填充等样式
• 文本控制区：用于设置标注文本的内容、颜色和大小
• Canvas 绘图区：实际绘图和显示的区域

  <div class="controls">
      <button id="rectMode" class="active">矩形模式</button>
      <button id="polyMode">多边形模式</button>
      <button id="lineMode">直线模式</button>
      <button id="pointMode">点模式</button>
      <button id="selectMode">选择/移动模式</button>
      <button id="clearAll">