UD5工具箱
核心功能
1. Canvas自由涂鸦
本工具采用HTML5 Canvas API作为核心绘图引擎，通过JavaScript监听鼠标事件（mousedown、mousemove、mouseup）和触摸事件（touchstart、touchmove、touchend），实时捕获用户的绘画轨迹坐标，并在Canvas画布上以连续线段的方式进行渲染。绘图算法会自动处理坐标偏移和缩放，确保在不同屏幕尺寸和分辨率下都能获得流畅自然的绘画体验。每次绘画操作都会被记录到历史状态数组中，为后续的撤销重做功能提供数据基础。
2. 多种颜色选择（10预设+自定义）
工具提供10种精心挑选的常用预设颜色，涵盖黑色、红色、蓝色、绿色、黄色、橙色、紫色、粉色、棕色和灰色，满足日常绘画的基本配色需求。预设颜色以直观的色块按钮形式排列，点击即可快速切换。此外，工具还内置了HTML5原生颜色选择器（input type="color"），用户可以通过颜色选择器自由调配任意颜色，突破预设颜色的限制。颜色切换时画笔会自动应用新选择的颜色，整个过程无需中断绘画操作。
3. 画笔大小调节（1-50像素）
画笔大小支持1像素到50像素的无级调节，通过直观的滑块控件实现。用户可以根据绘画需要自由调整画笔粗细：1-3像素适合精细描线和细节刻画，4-10像素适合普通线条绘制，11-25像素适合粗线条和强调轮廓，26-50像素适合大面积涂色和背景填充。滑块调节时会实时显示当前画笔大小的数值，帮助用户精准控制画笔粗细。画笔大小的调节不会中断当前的绘画状态，随时可以调整。
4. 橡皮擦工具
工具内置橡皮擦功能，点击橡皮擦按钮即可切换到橡皮擦模式。在橡皮擦模式下，用户的绘画操作会以白色覆盖原有内容，实现擦除效果。橡皮擦的大小同样受画笔大小滑块控制，用户可以调节橡皮擦的粗细以适应不同的擦除需求。再次点击画笔按钮即可切回正常绘画模式。橡皮擦操作同样支持撤销功能，擦除失误可以轻松恢复。
5. 撤销/重做（20步）
工具支持最多20步的撤销（Undo）和重做（Redo）操作。每次完成一笔绘画（从落笔到抬笔为一笔），Canvas的当前状态会被保存到历史记录数组中。点击撤销按钮可以回退到上一笔之前的状态，点击重做按钮可以恢复被撤销的操作。历史记录最多保存20步，超过20步后最早的记录会被自动清除，以节省浏览器内存。这一机制让用户可以放心大胆地绘画创作，不怕犯错。
辅助功能
6. 清空画布
点击清空画布按钮可以一键清除Canvas上的所有绘画内容，将画布恢复为初始的纯白状态。清空操作同样支持撤销，如果误点了清空按钮，可以通过撤销按钮恢复之前的绘画内容。清空画布后可以立即开始新的创作。
7. 下载PNG
绘画完成后，用户可以点击下载按钮将Canvas上的绘画内容以PNG格式保存到本地。PNG格式采用无损压缩，能够完整保留绘画作品的色彩和细节。下载的文件以当前时间戳命名，方便用户管理和查找。下载的图片可以直接用于社交媒体分享、文档插入、课件制作等用途。
8. 移动端触摸支持
针对手机和平板设备进行了专门的触摸优化。通过设置CSS属性touch-action:none，禁止了浏览器默认的触摸行为（如页面滚动、缩放等），确保用户的触摸操作全部用于绘画，不会触发页面的意外滚动或缩放。触摸事件的坐标会经过精确换算，确保手指触摸位置与画笔落点完全一致，绘画体验与桌面端同样流畅自然。
技术实现
本工具基于以下核心技术构建：
- HTML5 Canvas API：提供像素级的图形绘制能力，是整个绘图板的核心渲染引擎
- JavaScript事件系统：监听和处理鼠标事件、触摸事件，捕获用户绘画轨迹
- 状态管理：通过历史记录数组实现20步撤销重做功能
- File API：用于生成Canvas数据的PNG下载链接
- CSS touch-action：优化移动端触摸绘画体验
这些技术的组合确保了工具在各种现代浏览器和设备上都能高效、稳定地运行。