React我是从来没接触过只知道是一个前端框架国外比国内流行，接触比较多的是Vue。Canvas一直觉得是个神秘且不可思议的东西，比较好奇那些图形什么是基于什么原理绘制出来的。再加上最近发现OpenCode推出了桌面端也有免费的DeepSeek V4 Flash模型可以使用，就决定用它实现一个web端的轻量版自由画布。

先看下累计花费一天时间VibeCoding的自由画布最终效果吧（PS：演示gif动图做了画质压缩；OpenCode当天免费额度用完后，又接了DeepSeek的付费API搞定收尾工作）。

一、调研准备

虽然说想要做自由画布，但是决定做之前并没有好的想法，就直接问了下墨刀的实现， 感觉那也是利用画布技术实现的，问这个的另一个目的是让它面对我后面问题的时候它能对我的需求会有个大概的预期推测（这个你也可以让OpenCode自己 或者你用在线AI聊天工具什么的去调研自由画布、白板工具等产品的功能然后帮你整理一份报告及项目需求文档什么的，这会比直接盲干更高效）。

紧接着就让它给我推荐技术选型，最终也是按它推荐的技术框架来进行开发的（你也可以让AI给你写个PRD需求文档，养成这个好习惯）。

二、开始开发

一定要形成一个好习惯，让AI有问题及时跟你沟通！还有就是如果怕它“擅自”开工可以在没确认沟通完毕前调整为Plan模式这样它就无法操作文件。确认没问题后就可以让它开工了。

我想让你帮我开发一个，还有什么需要与我沟通的没？如果没有就开始先写个demo，确保有扩展性 因为我后面会迭代加需求

很快就开发完成了，可能是React在全世界比较流行 大模型训练的素材比较多（也更可能是DeepSeek 模型本身能力不错），测试中的bug改的也比较快，只是有个问题我没搞明白为什么最后我这个web项目界面全部是英文。

VibeCoding嘛老规矩贴一些沟通指令吧（一定要遵循“三会三好两及时”原则：会发号施令、会提问、会测试；你讲好话、它干好活、你好验收；及时备份代码、及时存经验文档）。

如果遇到交互问题，把问题跟AI讲清楚很重要，实在搞不定的就让它自己添加日志打印来排查问题，我做图片裁切功能的时候就是裁切后水平、垂直翻转图片后裁切选中区也翻转了讲了半天讲不明白，DeepSeek又不支持多模态没办法识别图片，最后添加了日志，然后翻转、裁切操作一遍后控制台复制日志给它后才解决。

如果你没有好想法可以继续问它，让它帮你想迭代功能，等罗列出来后选着让AI给你完成就行。

三、开发消耗总结

本次自由画布开发全程使用DeepSeek V4 Flash模型，总消耗Token≈1.4亿（OpenCode免费额度用完后，DeepSeek官方API消耗0.99元不到一块钱）；聊天窗口发送指令139次；

四、成果放送

先让OpenCode总结下这个画布工具的特色吧：

一个轻量但功能完整的无限画布工具：

无需注册，即开即用 — 纯前端，全在浏览器里跑，所有数据存 localStorage，不依赖任何后端服务。

完整的绘图体系 — 矩形、椭圆、线条（带箭头/虚线）、自由画笔、文本、表格、图片，覆盖日常设计/白板需求。

专业级图像裁剪 — 8 手柄裁剪框 + 翻转 + 实时预览，裁切结果可烘焙到图片中。

灵活的图层与编组 — 支持拖拽进出分组、树形图层、折叠展开、显隐/锁定控制。

吸附网格 — 动态自适应网格 + 一键吸附开关，对齐排版精准高效。

缩放到内容 + 小地图 — Fit 按钮一键适配所有元素，右下角小地图支持点击导航和视口指示。

智能粘贴 — Ctrl+V 自动识别画布元素 JSON、纯文本（→ 文本工具）和图片（→ 图像工具），全部放置在视口中心。

多格式导出 — 完整画布 ZIP（含图片）、PNG（支持透明通道）、单元素 PNG，满足不同场景。

多画布管理 — 创建多个独立文档，自动保存，一键切换。

纯前端架构 — React + Canvas 2D + Zustand，引擎层与 UI 层分离，易于扩展，npm run dev 即可启动。

所有资料源码（含直接运行的懒人包）已传网盘有需要自取：

通过网盘分享的文件：canvasTest纯前端自由画布
链接: https://pan.baidu.com/s/16lg5CCj4o5ib1J7y2v2_kQ?pwd=879k 提取码: 879k