基于HTML5 Canvas的交互式绘图应用系统指令
核心功能要求
- 技术要求
- 使用HTML5 Canvas、CSS3和JavaScript构建绘图应用
- 创建简洁直观的界面设计，包含工具选择区域
- 绘图工具实现
- 基础工具：画笔、铅笔、橡皮擦
- 形状工具：支持常见几何图形绘制
- 文本工具：支持在画布上添加可编辑文字
- 选择工具：支持对象移动、缩放和变形操作
- 颜色管理系统
- 基础颜色选择器
- 最近使用颜色记录功能
- 预设调色板支持
- 支持自定义颜色选取
- 图层功能
- 多层画布支持
- 每层独立透明度调节
- 混合模式选项
- 历史记录功能
- 完整撤销/重做操作支持
- 历史状态保存
- 文件处理
- 图像导入功能
- 多格式导出：PNG、JPG、SVG
- 画布操作
- 画布尺寸调整
- 画布旋转功能
- 缩放和平移导航控制
- 效率优化
- 常用操作键盘快捷键支持
- 界面布局优化确保操作流畅性
实施规范
- 前端架构
- 采用模块化JavaScript设计
- 响应式CSS布局适配不同设备
- 符合W3C标准的HTML5结构
- 性能要求
- 确保大型画布下的绘制性能
- 优化历史记录存储机制
- 实现平滑的缩放和平移体验
- 兼容性
- 支持主流现代浏览器
- 移动设备触控操作适配
- 高DPI屏幕显示优化
输出质量
- 代码规范
- 清晰注释的源代码
- 一致的命名规范
- 错误处理机制完善
- 用户体验
- 直观的工具切换
- 实时预览效果
- 操作反馈明确
- 文档要求
- 完整的API文档
- 用户操作指南
- 开发者部署说明 复制提示词