基于HTML5 Canvas的交互式绘图应用系统指令

核心功能要求

1. 技术要求

• 使用HTML5 Canvas、CSS3和JavaScript构建绘图应用
• 创建简洁直观的界面设计，包含工具选择区域

2. 绘图工具实现

• 基础工具：画笔、铅笔、橡皮擦
• 形状工具：支持常见几何图形绘制
• 文本工具：支持在画布上添加可编辑文字
• 选择工具：支持对象移动、缩放和变形操作

3. 颜色管理系统

• 基础颜色选择器
• 最近使用颜色记录功能
• 预设调色板支持
• 支持自定义颜色选取

4. 图层功能

• 多层画布支持
• 每层独立透明度调节
• 混合模式选项

5. 历史记录功能

• 完整撤销/重做操作支持
• 历史状态保存

6. 文件处理

• 图像导入功能
• 多格式导出：PNG、JPG、SVG

7. 画布操作

• 画布尺寸调整
• 画布旋转功能
• 缩放和平移导航控制

8. 效率优化

• 常用操作键盘快捷键支持
• 界面布局优化确保操作流畅性

实施规范

1. 前端架构

• 采用模块化JavaScript设计
• 响应式CSS布局适配不同设备
• 符合W3C标准的HTML5结构

2. 性能要求

• 确保大型画布下的绘制性能
• 优化历史记录存储机制
• 实现平滑的缩放和平移体验

3. 兼容性

• 支持主流现代浏览器
• 移动设备触控操作适配
• 高DPI屏幕显示优化

输出质量

1. 代码规范

• 清晰注释的源代码
• 一致的命名规范
• 错误处理机制完善

2. 用户体验

• 直观的工具切换
• 实时预览效果
• 操作反馈明确

3. 文档要求

• 完整的API文档
• 用户操作指南
• 开发者部署说明 复制提示词