不喜欢广告？ 去 无广告 今天
像素艺术画布及CSS导出
颜色开发人员图像
广告 移除？
广告 移除？
指导
像素艺术画布及CSS导出
您可以在浏览器中直接绘制清晰的8位风格精灵，并将其导出为纯CSS阴影艺术、可缩放的SVG、位图PNG或可移植的JSON格式。画布尺寸从8×8到64×64，内置经典调色板（NES、Game Boy、PICO-8、CGA、Commodore 64、Sweetie 16），并提供画笔、橡皮擦、填充和取色器工具，支持无限撤销和重做。
如何使用
- 从8×8到64×64中选择一个网格大小。较大的网格能提供更细致的细节，但绘画速度会变慢。
- 选择预设调色板，或在取色器中输入任意十六进制颜色。
- 点击画布工具栏中的画笔、橡皮擦、填充或取色器按钮——或按下
P,E,F,I. - 在画布上点击并拖动以绘画。使用
Ctrl+Z且Ctrl+Y进行撤销和重做。 - 选择导出格式（CSS阴影、SVG、PNG数据URI或JSON），设置像素大小，然后复制代码或下载文件。
特征
- 六个网格大小 ——8×8、16×16、24×24、32×32、48×48和64×64，适用于从微小图标到完整精灵图集的各种场景。
- 七个预设调色板 ——NES（54种颜色）、Game Boy、PICO-8、CGA、Commodore 64、Sweetie 16以及灰度渐变。
- 四种绘图工具 ——画笔、橡皮擦、填充工具（区域填充）和取色器，支持单键快捷操作。
- 平滑拖动绘图 ——使用Bresenham线插值算法，即使在小屏幕上也能保持笔触连续。
- 无限撤销和重做 ——最多支持60步历史记录，使用Ctrl+Z和Ctrl+Y键盘快捷键。
- 四种导出格式 ——CSS
box-shadow、SVG、PNG数据URI和JSON网格数据，每种格式均提供实时1:1预览。 - 触控支持 ——在平板和手机上支持原生触控和指针事件。
- 透明单元格 ——空像素在所有导出格式中保持透明，不会被填充为白色。
常问问题
-
数字成像中的像素是什么？
像素（picture element的缩写）是位图图像中最小可寻址单元。每个像素存储颜色信息——通常为红、绿、蓝通道值，范围在0到255之间——多个像素组成的网格构成完整图像。
-
CSS阴影如何渲染像素艺术？
CSS阴影接受多个阴影声明，每个声明包含x偏移、y偏移、模糊半径、扩展半径和颜色。将模糊和扩展半径设为零，并将每个阴影定位在网格上，可以利用单个1x1元素绘制出独立的彩色矩形——从而生成纯CSS像素图像，无需任何位图数据。
-
什么是有限调色板及其用途？
有限调色板限制作品仅使用一组固定的少量颜色，通常与复古游戏机（如NES、Game Boy或Commodore 64）的硬件限制相匹配。在调色板内创作能实现视觉一致性，唤起特定时代感，并迫使做出有意识的颜色选择，而非随意选择。
-
什么是填充算法？
填充算法从目标单元格开始，向外扩展到所有与之颜色相同的相邻单元格，并将每个单元格替换为新颜色。大多数画笔工具使用四方向填充（上、下、左、右），通过栈或队列实现，以避免深度递归。
-
为什么位图和矢量像素艺术不同？
位图像素艺术以彩色单元格网格的形式存储（如PNG或数据URI）。矢量像素艺术将每个单元格表示为数学形状（SVG或CSS阴影），可无限缩放而不失清晰度。矢量输出非常适合网页UI，因为shape-rendering: crispEdges在任意缩放级别下都能保持块状外观。
