### 多段线教学画板

## 角色定义

你是一位资深前端工程师兼资深平面设计师，精通 Canvas 2D 交互绘图、儿童教育产品视觉设计，擅长把抽象的几何概念转化为孩子看得懂、老师用得顺的交互演示。

## 任务描述

设计并实现一份用于课堂教师演示的交互式网页，核心是一块可编辑的大型画布。用户在画布上使用「多段线」与「中心线」两个工具完成图形绘制与对称镜像演示，全部操作必须直观、反馈即时、动画清晰。

## 画面与视觉规范

- 整体风格：儿童卡通，圆角、柔和描边、轻微手绘感，配色明快活泼但低饱和、不刺眼，杜绝高对比刺目色与闪烁。
- 配色建议：奶油白/浅米色画布底，搭配薄荷绿、天蓝、暖橙、柔粉作为功能色；文字与线条使用深灰而非纯黑，降低视觉疲劳。
- 画布：占据主屏幕的 2D 大画布，**不出现 X/Y 轴、不出现田字格**，只用均匀的**小方格**网格作为背景。格线为浅灰细线，视觉克制不明显。
- 一切距离、长度、位置描述均以「**格**」为单位，不出现像素、厘米、坐标数字等度量信息。
- 左侧为竖向工具栏，含两个工具项：**多段线**、**中心线**。工具项为卡通圆角卡片，带图标 + 文字标签。

## 交互规格

### 1. 工具选择反馈
- 单击左侧「多段线」后，该工具卡片立即播放清晰的选中动画（如放大回弹、描边高亮、底色填充变化、小勾标记出现），让用户一眼确认当前处于多段线模式；同时鼠标指针移动到画布时切换为绘图态光标。

### 2. 多段线绘制
- 鼠标进入画布后，指针位置在最近的格点上显示一个**灰色空心圆圈**，并随鼠标移动吸附到格点。
- 单击左键：该空心圆圈变为**黑色实心圆圈**，作为线段起点。
- 松开左键后可继续移动鼠标，下一个落点再次显示灰色空心圆圈；在下一个格点单击，两个实心圆圈之间连成一条**线段**（线段端点处的圆圈在成段后淡出隐藏，使画面只保留干净线段）。
- 重复上述操作可连续绘制多段折线，每一段与前一段首尾相接。
- 按下鼠标右键或按 Esc 键：立即退出当前绘制状态，工具恢复为未选中，已绘制图形保留在画布上。

### 3. 中心线
- 单击「中心线」工具可在画布中生成一条中心线，并通过再次点击或工具内选项在**横向**与**竖向**之间平滑切换（带过渡旋转动画）。
- 中心线样式区别于普通线段，使用醒目的虚线或彩色细线，并带可拖拽的把手，便于调整位置。

### 4. 对称镜像
- 提供镜像操作入口；执行后，选中的已绘制图形以当前中心线为对称轴生成镜像副本，动画呈现翻转过程，镜像图形与源图形形成清晰的对称关系。
- 横向中心线对应上下镜像，竖向中心线对应左右镜像，切换中心线方向后镜像结果同步变化。

## 输出约束

- 内容范围：仅围绕上述画布、多段线、中心线、镜像四类功能，不额外扩展无关工具。
- 输出格式：可直接运行的完整单文件 HTML（含 CSS 与 JavaScript），使用 Canvas 2D 实现，所有绘制逻辑封装清晰、变量命名语义化。
- 语言风格：界面文案简洁、儿童友好、中文；代码注释说清关键交互逻辑。
- 长度限制：代码保持精简可维护，避免冗余依赖，不引入第三方重型库。

## 质量标准

- 每一次鼠标交互都有即时、可见的反馈，用户无需猜测当前状态。
- 网格吸附精准稳定，线段始终落在格点上，视觉上严格对齐小方格。
- 绘制过程中不出现锯齿、抖动或残影，端点圆圈显隐过渡自然。
- 镜像结果在几何上严格对称，中心线方向切换后结果正确。
- 配色与动画符合儿童卡通风，长时间观看不刺眼、不易疲劳。
- 页面在常见屏幕尺寸下自适配，画布与工具栏布局始终完整可用。