像素画板：人人都是像素画师
像素画板：人人都是像素画师
一行需求，码道帮我写出了带 24 色调色板、Bresenham 补线和 PNG 导出的像素画板——拖拽画图、橡皮擦、网格开关，全在一个 HTML 里
分类: 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:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK
# 3. 启动 TUI
codearts
AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth
👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。
3. 码道能力一览
这次开发中，码道展示了以下能力：
- 自然语言编程：我说「像素画板网页小工具」，码道直接理解成画布 + 调色板 + 工具条 + 导出四件套方案
- 自主产品设计：自动选择了浅色现代风格、渐变背景、圆角卡片、左侧调色板 + 右侧画布的布局
- 工程细节到位：拖拽用 Bresenham 直线补格、绘制只做局部重绘、导出 PNG 时关闭图像平滑做 16 倍放大
- 自检与收尾：生成后自动确认文件已写入，并逐条汇报功能清单（构建耗时 3m 51s）
4. 任务描述
我想要一个像素画板网页小工具，具体要求：
- 单个 HTML 文件即可运行，不需要任何构建步骤
- 支持 16×16 和 32×32 两种画布尺寸
- 提供多种颜色的调色板
- 鼠标点击和拖拽绘制
- 橡皮擦工具
- 一键清空画布
- 导出为 PNG 图片下载
- 网格线显示开关
- 界面简洁美观，现代风格
开发命令：
# 打开码道 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 画布上点了一颗心：
可以看到：
- 左侧 24 色预置调色板，当前颜色显示为
#EF4444 - 右侧 16×16 网格画布，画心时共绘制 59 个像素
- 顶部 16×16 / 32×32 一键切换（有内容时会先确认）、网格线开关、清空、导出 PNG
- 底部状态栏实时显示工具、画布尺寸和已绘制像素数
8. 能力总结
| 能力 | 说明 |
|---|---|
| 自然语言理解 | 「像素画板网页小工具」→ 画布 / 调色板 / 工具 / 导出完整方案 |
| 算法细节 | Bresenham 补线避免拖拽漏格，局部重绘提升性能 |
| 输出质量 | 导出 PNG 关闭平滑做 16 倍放大，保持像素边缘锐利 |
| 产品细节 | 触摸支持、Toast 提示、尺寸切换确认、响应式布局、状态栏 |
9. 总结
这次实践最大的感受是：码道不止是把需求翻译成代码，它连「拖拽会不会漏格」「导出的图会不会糊」这种工程细节都考虑到了。单个 HTML 文件、零依赖、双击即用，适合快速做出随手可用的小工具。如果你也想试试，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
浙公网安备 33010602011771号