像素画生成器

关于像素画生成器

这个像素画生成器完全在你的浏览器中运行。选择网格大小，挑选颜色，然后在画布上开始绘制。你可以在画笔、擦除、填充（油漆桶）和取色器之间切换。完成后，可将作品导出为 PNG 图片、SVG 文件或 CSS box-shadow 代码，直接用于网页。所有绘制都通过 JavaScript 和 Canvas 在本地完成，不上传任何数据。

工具说明

• 画笔 —— 点击或拖动网格，用所选颜色填充像素。
• 擦除 —— 点击或拖动移除像素，使其变为透明。
• 填充 —— 点击某个区域，批量填充所有相邻同色像素。
• 取色器 —— 点击某个像素，将其颜色复制到颜色选择器。

导出格式

• PNG —— 支持透明背景的位图，直接下载到你的设备。
• SVG —— 由矩形组成的矢量图，可任意缩放且不失真。
• CSS box-shadow —— 用多重 box-shadow 生成单条 CSS 规则来复现像素画，非常适合轻量级网页图形。

使用方法

1. 选择网格大小（8×8 到 32×32）。
2. 挑选颜色并选择画笔工具。
3. 在画布上点击并拖动绘制。用擦除修正错误，用填充处理大块区域，用取色器复用颜色。
4. 点击撤销回退上一步，或清空重新开始。
5. 点击导出按钮，下载 PNG 或在输出框中生成 SVG/CSS 代码。

常见问题

这个工具会上传我的作品吗？ 不会。所有绘制和导出都在本地浏览器中完成，作品永远不会离开你的设备。

最大网格是多少？ 32×32，对图标和游戏精灵已经足够。更大的网格在小屏幕上难以编辑。

支持透明背景吗？ 支持。擦除的像素为透明，并在 PNG 和 SVG 导出中保留。

CSS box-shadow 导出是如何工作的？ 每个填充像素都变成一个按网格位置偏移的 box-shadow 条目，因此一个 HTML 元素配一条 CSS 规则即可渲染整幅图像。