FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
yuxiaobo
yuxiaobot1
Public
Like
t1
Home
Code
3
frontend
4
README.md
H
index.ts
Branches
1
Pull requests
Remixes
History
Environment variables
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
/
README.md
Code
/
README.md
Search
5/19/2025
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库文件
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.