利用AI工具生成画图板工具

一.输入指令，包含功能及要求

二.效果

三.项目经历
1.项目名称： 网页版多功能画图工具 项目时间： 2026.04 — 2026.05 项目角色： 独立开发者 / 全栈前端工程师 技术栈： HTML5 Canvas · CSS3 · 原生 JavaScript（ES6+）
2.项目描述：基于 HTML5 Canvas 2D API，从零独立设计并开发了一款功能完整的网页版矢量画图工具，支持多类型图形绘制、3D 立体图形渲染、分形算法可视化及完整的图形编辑工作流，无任何第三方依赖，实现开箱即用的浏览器端绘图体验。
3.主要职责与实现：图形绘制引擎：实现 11 种基础图形（直线、矩形、圆形、椭圆、三角形、多边形、星形、箭头、文字、画笔、橡皮擦），基于 Canvas 2D 上下文封装统一的图形渲染管线，支持填充色、描边色、透明度、线宽的独立控制
4.3D 立体图形模块：自主实现等轴测投影算法，完成正方体、球体（径向渐变高光模拟）、圆柱、金字塔、圆锥、圆环 6 种 3D 图形的着色渲染，支持 X/Y 轴旋转角度调节及实体/线框两种渲染模式
5.分形算法可视化：实现 6 种经典分形算法——Koch 雪花（递归线段分裂）、Sierpinski 三角（递归三角剖分）、Mandelbrot 集（逃逸时间算法 + HSV 染色）、Julia 集（可交互 C 参数调节）、分形树（随机角度递归）、龙形曲线（序列迭代折叠），支持迭代深度实时控制
6.交互编辑系统：实现基于双 Canvas 层（mainCanvas + previewCanvas）的实时预览架构，支持图形选择、拖拽移动、属性面板精确坐标编辑、方向键像素级微调、图形置顶/置底/复制
7.历史记录机制：基于 JSON 序列化实现 50 步撤回/重做（Undo/Redo Stack），保证任意操作可逆
8.文件持久化：实现图形数据 JSON 格式导入/导出（完整保留所有图层属性），支持 PNG 图片导出（合并白底与 Canvas 数据）及外部图片文件载入
工程化细节：设计 CSS 变量驱动的深色主题 UI 系统，完成完整键盘快捷键映射（15+ 组合键），支持 Ctrl+滚轮多级缩放，实现响应式布局适配
项目亮点 / 量化成果
9.全项目零外部依赖，单 HTML + CSS + JS 三文件结构，首屏加载 < 100ms
Canvas 双层预览架构避免了绘制过程中的频繁全量重绘，绘制交互流畅无闪烁
10.支持同时管理 100+ 图形对象，图层面板实时同步，操作延迟 < 16ms（60fps 级）
11.分形算法支持最高 14 级迭代，Mandelbrot/Julia 集采用逐像素 ImageData 直写，渲染性能优于同类 Canvas 实现
12.代码结构清晰，核心逻辑约 700 行，模块化组织（绘图引擎 / 3D 模块 / 分形模块 / 文件模块 / 交互层）
四.部分代码展示