分类: ai-development

标签: CodeArts, AI编程, 像素画板, Canvas, 前端小工具

难度: 初级

读者: 前端开发者、创意工具爱好者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个像素画板网页小工具，单个 HTML 文件……」大约 3 分 51 秒后，一个完整的像素画板就自动生成好了：16×16 / 32×32 画布、24 色调色板、鼠标拖拽绘制（Bresenham 补线）、橡皮擦、一键清空、导出 PNG、网格线开关，一个都没少，直接双击 HTML 就能用。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"# 2. 配置环境变量export PATH=~/.codeartsdoer/installers:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

这次开发中，码道展示了以下能力：

1. 自然语言编程：我说「像素画板网页小工具」，码道直接理解成画布 + 调色板 + 工具条 + 导出四件套方案
2. 自主产品设计：自动选择了浅色现代风格、渐变背景、圆角卡片、左侧调色板 + 右侧画布的布局
3. 工程细节到位：拖拽用 Bresenham 直线补格、绘制只做局部重绘、导出 PNG 时关闭图像平滑做 16 倍放大
4. 自检与收尾：生成后自动确认文件已写入，并逐条汇报功能清单（构建耗时 3m 51s）

4. 任务描述

我想要一个像素画板网页小工具，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 支持 16×16 和 32×32 两种画布尺寸
3. 提供多种颜色的调色板
4. 鼠标点击和拖拽绘制
5. 橡皮擦工具
6. 一键清空画布
7. 导出为 PNG 图片下载
8. 网格线显示开关
9. 界面简洁美观，现代风格

开发命令：

# 打开码道 TUI，在输入框中输入需求codearts

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在项目目录启动 codearts，将需求粘贴到输入框（模型为 Build · GLM-5.2）。提交后请求量较大时，TUI 会提示排队，稍等片刻即开始构建：

步骤 2：码道开始生成

排队结束后，码道进入构建流程，先列出设计思路（浅色现代风格、SVG 图标、圆角阴影），随后直接写出完整代码：

步骤 3：码道完成并汇报

约 3 分 51 秒后，码道完成开发，生成 pixel-art-board.html（653 行，约 19 KB），并逐条汇报功能清单：

从 TUI 的输出可以看到，除了需求里的功能，码道还自己补了触摸支持、Toast 提示、棋盘格透明底纹和响应式布局。

6. 代码解析

生成的 pixel-art-board.html 核心逻辑可以分为三块：像素绘制与补线、交互事件、PNG 导出。

单格绘制与局部重绘

function paintCell(x, y) {if (!inBounds(x, y)) return;var val = state.tool === 'eraser' ? null : state.color;if (state.grid[y][x] === val) return;state.grid[y][x] = val;// 局部重绘该格var p = state.pixel;ctx.clearRect(x * p, y * p, p, p);if (val) {ctx.fillStyle = val;ctx.fillRect(x * p, y * p, p, p);}if (state.showGrid) {ctx.strokeStyle = 'rgba(0,0,0,0.12)';ctx.lineWidth = 1;ctx.strokeRect(x * p + 0.5, y * p + 0.5, p - 1, p - 1);}updateStatus();}

码道用一个二维数组 grid 保存每个格子的颜色，画笔写入当前颜色、橡皮擦写 null。每次只重绘被点击的那一格，而不是整张画布。

Bresenham 补线：快速拖动不漏格

// Bresenham 直线，避免快速拖动时漏格function paintLine(x0, y0, x1, y1) {var dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);var sx = x0 < x1 ? 1 : -1, sy = y0 < y1 ? 1 : -1;var err = dx - dy;while (true) {paintCell(x0, y0);if (x0 === x1 && y0 === y1) break;var e2 = 2 * err;if (e2 > -dy) { err -= dy; x0 += sx; }if (e2 < dx) { err += dx; y0 += sy; }}}

鼠标拖动时，如果两次 mousemove 跨过多个格子，直接连点会漏格。码道用经典的 Bresenham 直线算法把上一格和当前格之间的格子全部补上，快速甩动鼠标也能画出连续线条，还顺带支持了触摸事件。

导出 PNG：16 倍放大保持像素清晰

// 先生成 1px/像素 的原始图var raw = document.createElement('canvas');raw.width = state.size;raw.height = state.size;var rctx = raw.getContext('2d');for (var y = 0; y < state.size; y++) {for (var x = 0; x < state.size; x++) {if (state.grid[y][x]) {rctx.fillStyle = state.grid[y][x];rctx.fillRect(x, y, 1, 1);}}}// 放大输出，保持像素清晰var scale = 16;var out = document.createElement('canvas');out.width = state.size * scale;out.height = state.size * scale;var octx = out.getContext('2d');octx.imageSmoothingEnabled = false;octx.drawImage(raw, 0, 0, out.width, out.height);

导出逻辑先按 1 像素 = 1 格生成原始位图，再关闭 imageSmoothingEnabled 放大 16 倍，这样导出的 PNG 边缘是硬像素、不会模糊——对像素画来说这个细节很关键。

7. 运行效果

用浏览器打开 pixel-art-board.html，用红色在 16×16 画布上点了一颗心：

可以看到：

1. 左侧 24 色预置调色板，当前颜色显示为 #EF4444
2. 右侧 16×16 网格画布，画心时共绘制 59 个像素
3. 顶部 16×16 / 32×32 一键切换（有内容时会先确认）、网格线开关、清空、导出 PNG
4. 底部状态栏实时显示工具、画布尺寸和已绘制像素数

8. 能力总结

9. 总结

这次实践最大的感受是：码道不止是把需求翻译成代码，它连「拖拽会不会漏格」「导出的图会不会糊」这种工程细节都考虑到了。单个 HTML 文件、零依赖、双击即用，适合快速做出随手可用的小工具。如果你也想试试，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz