像素画编辑器

基于 LeaferJS 渲染引擎的在线像素画绘制工具。免登录、零依赖、纯前端运行,支持画笔/橡皮/吸管/填充四种工具,PNG 多倍放大导出。

🎨

四种绘制工具

画笔(自由绘制)、橡皮(清除像素)、吸管(取已有颜色)、填充(油漆桶连通区域)。覆盖像素画创作核心场景。

Bresenham 直线插值

快速拖拽画笔时不会出现断点,Bresenham 算法在两点之间自动补全所有像素,绘制流畅无跳格。

📤

PNG 多倍导出

支持 1x / 4x / 8x 三档放大导出。16×16 画布 8x 导出即 128×128 PNG,透明背景,可直接用于游戏开发或社交分享。

关于星之谣像素画编辑器

像素画(Pixel Art)是一种以单个像素为基本单元的数字艺术形式,起源于 8 位/16 位游戏时代的游戏美术。随着复古游戏风潮和独立游戏的兴起,像素画重新成为流行的艺术风格。本编辑器基于 LeaferJS 矢量渲染引擎,将每个像素映射为场景图中的 Rect 节点,提供专业级像素画绘制体验。

玩法详解

1. 选择画布尺寸

提供 16×16 和 32×32 两档画布。16×16 适合做小图标、emoji 表情、简单角色;32×32 适合做游戏精灵、复杂角色、场景元素。MVP 版本暂不支持 64×64 大画布(场景图节点数过多会影响性能)。

2. 工具栏使用

  • 画笔(✏️):点击或拖拽绘制像素,使用当前选中的颜色
  • 橡皮(🧽):清除像素,使其变为透明
  • 吸管(💧):取画布上已有像素的颜色作为当前颜色
  • 填充(🪣):油漆桶工具,点击某个区域会将所有相邻同色像素全部改为当前颜色

3. 调色板

预设 16 色调色板参考 PICO-8 经典配色,涵盖黑白灰、红橙黄绿青蓝紫粉等基础色相。点击调色板下方圆形按钮可使用浏览器原生颜色选择器自定义任意颜色。最近使用的 8 种颜色会自动记录,方便快速切换。

4. 撤销重做与快捷键

每次完成一笔绘制(pointerUp 后)自动保存快照,最多保留 20 步历史。支持 Ctrl+Z 撤销、Ctrl+YCtrl+Shift+Z 重做。

5. 导出 PNG

选择放大倍数(1x / 4x / 8x),点击"导出 PNG"按钮即可下载。导出图片为透明背景,可直接用于游戏开发、网页图标、社交分享。文件名自动带日期和尺寸标识,例如 pixelart_16x16_8x_20260719.png

使用场景

  • 独立游戏开发:制作角色精灵、道具图标、场景元素
  • 网页与 App 设计:favicon、UI 图标、loading 动画帧
  • 社交内容创作:朋友圈像素风头像、emoji 表情包
  • 教学与娱乐:像素画入门练习、儿童美术启蒙
  • 复古美术设计:8 位风格海报、复古风品牌物料

适合人群

  • 像素画爱好者和艺术家
  • 独立游戏开发者和游戏美术
  • UI/UX 设计师、网页设计师
  • 社交媒体内容创作者
  • 学生和美术初学者
  • 复古游戏爱好者

技术特色

本编辑器技术亮点:

  • 基于 LeaferJS 2.x 矢量渲染引擎,每个像素是场景图中的 Rect 节点
  • Bresenham 直线算法插值,画笔拖拽无跳格
  • BFS 广度优先搜索实现油漆桶连通区域填充
  • 像素数据数组快照实现撤销/重做,最多 20 步历史
  • 离屏 Canvas 直接绘制导出,透明背景 PNG,1x/4x/8x 多倍放大
  • 纯前端运行,零后端依赖,免登录直接使用