🌐 简体中文 | 繁體中文 | English

---

🎨 PixelCraft — Web 像素画编辑器

🖌️ 一款零依赖、纯前端、开箱即用的 Web 像素画编辑器，支持多帧动画、多调色板、一键导出。

---

🎉 项目介绍

PixelCraft 是一款纯前端浏览器端像素画编辑器，零依赖、无需安装、打开即用。灵感来源于 GitHub Explore 推荐的「Pixel Art Tools」专题以及经典像素画工具 Aseprite，旨在为像素画爱好者、独立游戏开发者、UI 设计师提供一个轻量、高效、美观的在线创作工具。

🌟 为什么选择 PixelCraft？

对比维度	传统像素画软件	PixelCraft
安装方式	需下载安装	浏览器打开即用
跨平台	部分不支持	全平台兼容
体积	几十 MB ~ 几百 MB	仅 3 个文件 ~50KB
依赖	运行时/框架	零依赖
分享	需导出再发送	导出 PNG 直接分享

---

✨ 核心特性

• 🖌️ 多种绘图工具 — 铅笔、橡皮擦、油漆桶填充、取色器、画布移动，覆盖像素画创作全流程
• 🎨 5 套预设调色板 — Classic（经典32色）、GameBoy（复古4色）、Pastel（柔和色系）、Neon（霓虹色系）、Earth（自然色系）
• 🎬 多帧动画支持 — 支持添加/复制/删除帧，帧间导航，可调速播放（2/4/8/12/24 FPS），导出精灵表（Sprite Sheet）
• 📐 灵活画布尺寸 — 预设 8×8、16×16、32×32、48×48、64×64，支持自定义尺寸（4-128）
• ↩️ 完整撤销/重做 — 支持最多 100 步历史记录，Ctrl+Z / Ctrl+Y 快捷操作
• 🔍 无极缩放 — 支持 50%~2000% 画布缩放，滚轮 + 按钮双重控制
• 📏 网格辅助线 — 可切换显示/隐藏像素网格
• 🖊️ 可变笔刷大小 — 1-8px 笔刷，适合大块填色和细节描绘
• ⌨️ 全键盘快捷键 — P/E/G/I/V/B/X 等快捷键，高效创作
• 📥 一键导出 — 导出高清 PNG（2x 分辨率），多帧导出精灵表
• 📱 响应式设计 — 适配桌面端和移动端触摸操作
• 🌙 暗色主题 UI — 专业级暗色界面，护眼且聚焦创作
• 🚀 零依赖 — 纯 HTML + CSS + JavaScript，无需 npm install，无需构建工具

---

🚀 快速开始

环境要求

• 现代浏览器（Chrome 90+ / Firefox 90+ / Safari 15+ / Edge 90+）
• 无需任何服务器、运行时或构建工具

方式一：直接打开（推荐）

# 克隆仓库
git clone https://github.com/gitstq/PixelCraft.git
cd PixelCraft

# 直接用浏览器打开 index.html
# macOS
open index.html

# Windows
start index.html

# Linux
xdg-open index.html

方式二：本地服务器

cd PixelCraft
python3 -m http.server 8080
# 打开浏览器访问 http://localhost:8080

方式三：在线使用

部署至 GitHub Pages 或任意静态托管服务后，直接通过 URL 访问。

---

📖 详细使用指南

基础绘图

1. 在左侧工具栏选择铅笔工具（或按 P 键）
2. 在右侧调色板中选择颜色（或使用取色器按 I 键）
3. 在画布上点击或拖拽进行绘制
4. 使用橡皮擦（E 键）擦除像素

油漆桶填充

1. 选择油漆桶工具（G 键）
2. 点击画布上任意封闭区域，自动填充当前主色

动画制作

1. 点击 + 按钮添加新帧
2. 在每帧上绘制不同的画面
3. 选择播放速度（FPS），点击 ▶ Play 预览动画
4. 点击 📥 Export PNG 导出精灵表（Sprite Sheet）

快捷键速查

快捷键	功能
P	铅笔工具
E	橡皮擦
G	油漆桶填充
I	取色器
V	移动画布
B	切换网格
X	交换主/副颜色
[ / ]	减小/增大笔刷
Ctrl+Z	撤销
Ctrl+Y	重做
Ctrl+S	导出 PNG

---

💡 设计思路与迭代规划

设计理念

• 极致轻量：拒绝框架依赖，纯原生 Web 技术栈实现
• 开箱即用：零配置，打开浏览器即可开始创作
• 体验优先：专业暗色 UI、流畅的像素级渲染、完整的键盘快捷键

技术选型

技术	选型理由
HTML5 Canvas	像素级渲染，高性能，像素化渲染支持
CSS3	自定义属性、Grid/Flexbox 布局、暗色主题
Vanilla JavaScript	零依赖，极致轻量，兼容性好

后续迭代计划

• 🎯 图层系统（Layer System）
• 🎨 自定义调色板保存/导入
• 📁 项目文件保存/加载（.pxc 格式）
• 🖼️ 导入图片自动像素化
• 🎞️ 导出 GIF/APNG 动画
• 🔲 对称绘制模式（镜像/X轴/Y轴）
• 🔲 选区工具（矩形/魔棒）
• 🎨 渐变填充工具
• 📋 复制/粘贴选区
• 🔗 实时协作（WebSocket 多人同画）

---

📦 打包与部署指南

部署至 GitHub Pages

1. 将仓库推送至 GitHub
2. 进入仓库 Settings → Pages
3. Source 选择 main 分支，根目录 /
4. 保存后自动部署

部署至任意静态托管

PixelCraft 是纯静态项目，可部署至：

• Vercel: vercel --prod
• Netlify: 拖拽文件夹或连接 Git 仓库
• Cloudflare Pages: 连接 GitHub 仓库自动部署
• Nginx/Apache: 将文件复制至 Web 根目录

离线使用

下载全部文件到本地，直接打开 index.html 即可离线使用。

---

🤝 贡献指南

我们欢迎所有形式的贡献！

提交 PR 流程

1. Fork 本仓库
2. 创建特性分支：git checkout -b feat/amazing-feature
3. 提交代码：git commit -m 'feat: add amazing feature'
4. 推送分支：git push origin feat/amazing-feature
5. 创建 Pull Request

提交规范

本项目遵循 Angular 提交规范：

• feat: 新增功能
• fix: 修复问题
• docs: 文档更新
• style: 代码格式
• refactor: 代码重构
• perf: 性能优化
• test: 测试相关

Issue 反馈

请在 Issue 中提供以下信息：

• 浏览器及版本
• 操作步骤
• 预期行为 vs 实际行为
• 截图（如有）

---

📄 开源协议

本项目基于 MIT 协议 开源，您可以自由使用、修改、分发本项目代码，包括商业用途。

详见 LICENSE 文件。

---

Made with 🎨 by gitstq

---

🎨 PixelCraft — Web 像素畫編輯器

🖌️ 一款零依賴、純前端、開箱即用的 Web 像素畫編輯器，支援多幀動畫、多調色板、一鍵匯出。

---

🎉 項目介紹

PixelCraft 是一款純前端瀏覽器端像素畫編輯器，零依賴、無需安裝、打開即用。靈感來源於 GitHub Explore 推薦的「Pixel Art Tools」專題以及經典像素畫工具 Aseprite，旨在為像素畫愛好者、獨立遊戲開發者、UI 設計師提供一個輕量、高效、美觀的線上創作工具。

---

✨ 核心特性

• 🖌️ 多種繪圖工具 — 鉛筆、橡皮擦、油漆桶填充、取色器、畫布移動，覆蓋像素畫創作全流程
• 🎨 5 套預設調色板 — Classic（經典32色）、GameBoy（復古4色）、Pastel（柔和色系）、Neon（霓虹色系）、Earth（自然色系）
• 🎬 多幀動畫支援 — 支援新增/複製/刪除幀，幀間導航，可調速播放（2/4/8/12/24 FPS），匯出精靈表（Sprite Sheet）
• 📐 靈活畫布尺寸 — 預設 8×8、16×16、32×32、48×48、64×64，支援自訂尺寸（4-128）
• ↩️ 完整撤銷/重做 — 支援最多 100 步歷史記錄，Ctrl+Z / Ctrl+Y 快捷操作
• 🔍 無極縮放 — 支援 50%~2000% 畫布縮放，滾輪 + 按鈕雙重控制
• 📏 網格輔助線 — 可切換顯示/隱藏像素網格
• 🖊️ 可變筆刷大小 — 1-8px 筆刷，適合大塊填色和細節描繪
• ⌨️ 全鍵盤快捷鍵 — P/E/G/I/V/B/X 等快捷鍵，高效創作
• 📥 一鍵匯出 — 匯出高清 PNG（2x 解析度），多幀匯出精靈表
• 📱 響應式設計 — 適配桌面端和移動端觸控操作
• 🌙 暗色主題 UI — 專業級暗色介面，護眼且聚焦創作
• 🚀 零依賴 — 純 HTML + CSS + JavaScript，無需 npm install，無需構建工具

---

🚀 快速開始

環境要求

• 現代瀏覽器（Chrome 90+ / Firefox 90+ / Safari 15+ / Edge 90+）
• 無需任何伺服器、執行環境或構建工具

# 複製倉庫
git clone https://github.com/gitstq/PixelCraft.git
cd PixelCraft

# 直接用瀏覽器打開 index.html
open index.html  # macOS
# 或
start index.html  # Windows
# 或
xdg-open index.html  # Linux

---

📖 快捷鍵速查

快捷鍵	功能
P	鉛筆工具
E	橡皮擦
G	油漆桶填充
I	取色器
V	移動畫布
B	切換網格
X	交換主/副顏色
[ / ]	減小/增大筆刷
Ctrl+Z	撤銷
Ctrl+Y	重做
Ctrl+S	匯出 PNG

---

📄 開源協議

本項目基於 MIT 協議 開源。

---

Made with 🎨 by gitstq

---

🎨 PixelCraft — Web Pixel Art Editor

🖌️ A zero-dependency, pure frontend, ready-to-use web-based pixel art editor with multi-frame animation, multiple color palettes, and one-click export.

---

🎉 Introduction

PixelCraft is a pure frontend, browser-based pixel art editor — zero dependencies, no installation required, works instantly. Inspired by GitHub Explore's "Pixel Art Tools" collection and classic tools like Aseprite, PixelCraft aims to provide pixel art enthusiasts, indie game developers, and UI designers with a lightweight, efficient, and beautiful online creation tool.

🌟 Why PixelCraft?

Aspect	Traditional Pixel Art Software	PixelCraft
Installation	Download & install required	Open in browser
Cross-platform	Limited	Universal
File size	50MB ~ 500MB+	~50KB (3 files)
Dependencies	Runtime/Frameworks	Zero
Sharing	Export then share	Export PNG directly

---

✨ Core Features

• 🖌️ Multiple Drawing Tools — Pencil, Eraser, Flood Fill, Color Picker, Canvas Move — covers the complete pixel art workflow
• 🎨 5 Preset Palettes — Classic (32 colors), GameBoy (retro 4 colors), Pastel (soft tones), Neon (vibrant), Earth (natural tones)
• 🎬 Multi-frame Animation — Add/Duplicate/Delete frames, frame navigation, adjustable playback speed (2/4/8/12/24 FPS), sprite sheet export
• 📐 Flexible Canvas Sizes — Presets: 8×8, 16×16, 32×32, 48×48, 64×64; custom sizes (4-128)
• ↩️ Full Undo/Redo — Up to 100 history steps, Ctrl+Z / Ctrl+Y shortcuts
• 🔍 Smooth Zoom — 50%~2000% canvas zoom, scroll wheel + button controls
• 📏 Grid Overlay — Toggle pixel grid on/off
• 🖊️ Variable Brush Size — 1-8px brush for broad fills and fine details
• ⌨️ Full Keyboard Shortcuts — P/E/G/I/V/B/X for efficient workflow
• 📥 One-click Export — HD PNG export (2x resolution), multi-frame sprite sheet export
• 📱 Responsive Design — Works on desktop and mobile touch devices
• 🌙 Dark Theme UI — Professional dark interface, eye-friendly
• 🚀 Zero Dependencies — Pure HTML + CSS + JavaScript, no npm install, no build tools

---

🚀 Quick Start

Requirements

• Modern browser (Chrome 90+ / Firefox 90+ / Safari 15+ / Edge 90+)
• No server, runtime, or build tools needed

Option 1: Open directly (Recommended)

# Clone the repository
git clone https://github.com/gitstq/PixelCraft.git
cd PixelCraft

# Open index.html in your browser
open index.html    # macOS
start index.html   # Windows
xdg-open index.html # Linux

Option 2: Local server

cd PixelCraft
python3 -m http.server 8080
# Visit http://localhost:8080 in your browser

Option 3: Online

Deploy to GitHub Pages or any static hosting service.

---

📖 Usage Guide

Basic Drawing

1. Select the Pencil tool from the left toolbar (or press P)
2. Choose a color from the right palette (or use the color picker with I)
3. Click or drag on the canvas to draw
4. Use the Eraser (E) to remove pixels

Flood Fill

1. Select the Fill tool (G)
2. Click any enclosed area on the canvas to fill with the current primary color

Animation

1. Click + to add a new frame
2. Draw different content on each frame
3. Select playback speed (FPS), click ▶ Play to preview
4. Click 📥 Export PNG to export a sprite sheet

Keyboard Shortcuts

Shortcut	Action
P	Pencil tool
E	Eraser
G	Fill bucket
I	Color picker
V	Move canvas
B	Toggle grid
X	Swap primary/secondary colors
[ / ]	Decrease/Increase brush size
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+S	Export PNG

---

💡 Design Philosophy & Roadmap

Design Principles

• Ultra-lightweight: No framework dependencies, pure vanilla web technologies
• Ready to use: Zero configuration, open browser and start creating
• Experience first: Professional dark UI, smooth pixel-level rendering, comprehensive keyboard shortcuts

Tech Stack

Technology	Rationale
HTML5 Canvas	Pixel-level rendering, high performance, crisp pixel art
CSS3	Custom properties, Grid/Flexbox, dark theme
Vanilla JavaScript	Zero dependencies, ultra-lightweight, excellent compatibility

Roadmap

• 🎯 Layer System
• 🎨 Custom palette save/import
• 📁 Project file save/load (.pxc format)
• 🖼️ Import image auto-pixelate
• 🎞️ Export GIF/APNG animation
• 🔲 Symmetry drawing mode (mirror/X-axis/Y-axis)
• 🔲 Selection tools (rectangular/magic wand)
• 🎨 Gradient fill tool
• 📋 Copy/paste selection
• 🔗 Real-time collaboration (WebSocket multi-user)

---

📦 Deployment Guide

GitHub Pages

1. Push the repository to GitHub
2. Go to Settings → Pages
3. Source: main branch, root directory /
4. Save — auto-deployed!

Static Hosting

PixelCraft is a pure static project, deployable to:

• Vercel: vercel --prod
• Netlify: Drag folder or connect Git repository
• Cloudflare Pages: Connect GitHub repository for auto-deployment
• Nginx/Apache: Copy files to web root directory

Offline Use

Download all files locally and open index.html — works completely offline.

---

🤝 Contributing

We welcome all forms of contribution!

PR Workflow

1. Fork this repository
2. Create a feature branch: git checkout -b feat/amazing-feature
3. Commit changes: git commit -m 'feat: add amazing feature'
4. Push branch: git push origin feat/amazing-feature
5. Create Pull Request

Commit Convention

This project follows the Angular Commit Convention:

• feat: New feature
• fix: Bug fix
• docs: Documentation
• style: Code formatting
• refactor: Code refactoring
• perf: Performance improvement
• test: Testing

Issue Reporting

Please include:

• Browser and version
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

---

📄 License

This project is open-sourced under the MIT License. You are free to use, modify, and distribute this code, including for commercial purposes.

See LICENSE for details.

---

Made with 🎨 by gitstq