Log inSign up
yuxiaobo
yuxiaobot1
Public
Like
t1
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Search
index.ts
README.md

简易像素画板 (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库文件
HTTP
Code