1. 为什么我又把像素画编辑器翻出来写了一遍小时候在方格本上画小人、画宝剑、画爱心一格一格涂满涂错了就用橡皮擦掉重来。现在用 Codex 从零生成一个能跑的像素画编辑器Canvas 画布、调色板、网格绘制、导出 PNG 全都有打开浏览器就能用。这篇不是概念演示而是把可复制的 HTML/JavaScript 骨架、Codex 提示词配置、以及逐项验证绘制/擦除/导出功能的操作步骤都交出来。适合谁想用 AI 辅助写前端小工具的人、想给小孩做个像素画玩具的家长、以及想练手 Canvas 的 JavaScript 学习者。核心检索词就三个Codex、像素画编辑器、Canvas。我试过把整个项目拆成 8 个模块让 Codex 逐个生成比一次性丢一个大需求稳定得多下面按这个思路走。2. TaoToken 前置先把模型通道准备好Codex 这类编码助手要稳定跑起来背后得有一个能持续调用的模型通道。我这边用的是 TaoToken 的 Coding Plan专门给长期编码和 Agent 场景用的比按次调用省心。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台生成 API Key地址是 https://taotoken.net/api 注意这个 API 地址不带 UTM 参数直接填就行。具体操作登录后进控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面新建一个 Key复制保存。如果你只是想先验证模型能不能正常对话可以去模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 发一句“你好”确认连通。长期编码的话建议直接上 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 额度更划算。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 配置项和报错码都写得很清楚。注意API Key 只存在本地环境变量或配置文件里别写进前端代码提交到仓库。像素画编辑器本身是纯前端项目不需要把 Key 打进 HTML。3. 可复制配置Codex 提示词与项目骨架3.1 环境检查与项目初始化先确认 Node 版本Codex CLI 需要 v20 以上node -v # v20.x 或更高 codex --version # 能输出版本号即可 mkdir pixel-editor cd pixel-editor3.2 让 Codex 生成项目结构在终端里给 Codex 下第一条提示词重点是模块化拆分别让它一口气写一个几千行的文件codex 创建一个像素画编辑器项目纯 HTML CSS JavaScript Canvas不依赖框架。 项目结构 - index.html主页面 - css/style.css深色主题样式 - js/canvas.js画布核心缩放、平移、渲染、坐标转换 - js/tools.js绘画工具画笔、橡皮、填充、取色、直线、矩形 - js/layers.js图层管理 - js/history.js历史记录撤销/重做 - js/export.js导出 PNG - js/app.js主入口串联所有模块 先实现 index.html 和基础画布渲染 1. 画布支持 8x8、16x16、32x32、64x64 四种网格尺寸 2. 鼠标滚轮缩放范围 2x 到 40x 3. 中键或空格左键拖拽平移 4. 网格线可开关 5. 左侧工具栏右侧属性面板中间画布区 6. 界面风格参考 Aseprite深色主题Codex 会依次创建目录和文件。生成完先别急着改打开index.html看结构是否完整。3.3 画布核心的关键参数js/canvas.js里最值得关注的是坐标转换和 Bresenham 连线。核心逻辑是屏幕坐标除以缩放比例再减去偏移量得到像素格坐标。鼠标快速移动时用 Bresenham 算法把两点之间经过的所有格子都补上避免断点。这部分 Codex 生成后建议手动核对一遍screenToPixel函数screenToPixel(screenX, screenY) { const px Math.floor((screenX - this.offsetX) / this.scale); const py Math.floor((screenY - this.offsetY) / this.scale); return { x: px, y: py }; }scale是每个像素格在屏幕上的大小offsetX/offsetY是画布左上角相对容器左上角的偏移。缩放时以鼠标位置为中心公式是offsetX mouseX - (mouseX - offsetX) * ratio这样缩放不会跑偏。3.4 工具模块的提示词codex 实现 js/tools.js包含 1. 画笔点击/拖拽绘制像素支持 Bresenham 连线 2. 橡皮将像素设为 null透明 3. 填充桶BFS 实现 Flood Fill填充连通同色区域 4. 取色器点击画布拾取颜色到前景色 5. 直线和矩形按住拖拽松开确认 所有工具支持对称模式水平/垂直/双向。 快捷键B画笔 E橡皮 G填充 I取色 L直线 R矩形Flood Fill 用 BFS 而不是递归避免大画布栈溢出。Codex 生成的版本用queue.shift()配合visited集合逻辑清晰。4. 验证请求逐项测试绘制、擦除、导出4.1 启动本地服务npm install -g live-server live-server浏览器打开http://127.0.0.1:8080看到深色界面和中间带棋盘格背景的画布就算成功。4.2 绘制功能验证选画笔工具在画布上点几个格子应该立刻出现颜色。按住鼠标拖动检查是否有断点——如果快速划一条斜线Bresenham 算法应该保证线条连续。切换 16x16 到 32x32画布重新居中之前画的内容会清空因为网格尺寸变了数据重置这是预期行为。4.3 擦除与填充验证选橡皮擦在刚才画的像素上拖过格子变回棋盘格透明状态。选填充桶点一个空白区域应该只填充连通的空白不会越过已经画好的线条。如果填充溢出了检查 Flood Fill 的边界判断是不是漏了x 0 || x size这类条件。4.4 导出 PNG 验证点“导出 PNG”按钮浏览器应该下载一个pixel-art-时间戳.png。用图片查看器打开透明区域保持透明像素边缘锐利不模糊。如果导出图片模糊检查_renderToCanvas里有没有设置imageSmoothingEnabled false或者导出时放大倍数不够。// 导出时建议放大 4 倍避免图片太小 exportPNG(layers, gridSize, scale 4) { const canvas this._renderToCanvas(layers, gridSize, scale); canvas.toBlob((blob) { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download pixel-art-${Date.now()}.png; a.click(); URL.revokeObjectURL(url); }, image/png); }4.5 撤销重做验证画几笔按 CtrlZ应该逐步回退。再按 CtrlY恢复操作。如果撤销后画布没变化检查historyManager.undo()返回的快照有没有正确传给layerManager.restoreSnapshot()并触发render()。5. 本篇常见错排查画布不显示或一片空白检查canvas.width和canvas.height是否在_resizeCanvas里正确赋值。容器#canvas-area如果没有明确高度getBoundingClientRect()返回 0画布尺寸就是 0。给容器加flex: 1和overflow: hidden。鼠标坐标偏移e.offsetX是相对 canvas 元素的坐标如果 canvas 有 CSS 缩放或边框需要额外校正。最稳妥的做法是用getBoundingClientRect()计算const rect canvas.getBoundingClientRect(); const mouseX e.clientX - rect.left; const mouseY e.clientY - rect.top;填充桶卡死或填充整个画布Flood Fill 的targetColor和fillColor相同时要直接返回否则会无限循环。另外visited集合的 key 用${x},${y}字符串别用对象否则去重失效。导出 PNG 是空白_renderToCanvas里遍历图层时如果图层数据是null表示透明ctx.fillStyle null会报错或画不出东西。加一层判断if (color)再绘制。Codex 生成的代码报错找不到类检查index.html里script的引入顺序。history.js要在canvas.js之前app.js必须最后加载因为它依赖前面所有模块的类定义。API 调用返回 401 或 403去控制台确认 Key 是否有效或者换用 Coding Plan 的专用端点。接入文档里有完整的错误码对照表对着查比瞎试快。6. 继续往下走像素画编辑器跑通之后你可以让 Codex 继续加功能洋葱皮效果半透明显示前后帧、GIF 导出、模板库一键加载。这些在同一个项目里增量提示就行不用重开。如果编码过程中遇到模型调用不稳定回到 Coding Plan 页面看看额度状态想先验证某个模型对 Canvas 代码的理解能力用模型对话页丢一段代码进去问就行。API Key 和接入文档随时在控制台和文档页能找到配置一次后面就省事了。