简易像素画板 (Pixel Art Maker)

一个零依赖的像素艺术创作工具,支持对称绘制和GIF动画导出。

功能特点

网格绘图工具

  • 动态生成可调节大小的像素网格
  • 点击填充颜色
  • 使用CSS Grid和事件委托实现高效绘制

对称绘制模式

  • 水平对称:绘制时自动在水平轴对称位置复制笔触
  • 垂直对称:绘制时自动在垂直轴对称位置复制笔触
  • 中心对称:绘制时自动在中心对称位置复制笔触

GIF帧动画

  • 创建多帧像素画
  • 预览动画效果
  • 使用开源库gif.js导出GIF动画

技术实现

  • 纯HTML、CSS和JavaScript实现,零依赖
  • 使用CSS Grid布局像素网格
  • 事件委托处理绘图操作
  • 使用Canvas绘制帧缩略图和预览
  • 集成gif.js库用于GIF动画导出

使用方法

  1. 设置网格尺寸和像素大小,点击"创建网格"
  2. 选择颜色和对称模式
  3. 在网格上绘制像素艺术
  4. 使用"添加帧"创建动画帧
  5. 点击"预览动画"查看效果
  6. 点击"导出GIF"保存动画

项目结构

  • /index.ts - HTTP触发器,提供应用服务
  • /frontend/index.html - 主HTML文件
  • /frontend/styles.css - CSS样式
  • /frontend/app.js - 主应用逻辑
  • /frontend/gifjs/ - GIF.js库文件