像素画生成器 使用指南
在 4–24 的网格上手工点击上色绘制像素画，颜色从固定 6 色（红、橙、绿、蓝、紫、黑）中选择，完成后导出字符画 .txt 或 CSS box-shadow 像素块；不导入图片、不做自动像素化。
功能说明
页面把每个格子存进二维数组：点击按当前颜色写入，擦除模式写空白。网格尺寸可选 4–24，越界会直接提示错误；8×8 会载入 48 个有色格的预置笑脸，其余尺寸从空白画布开始。结果区同时给出可点击画布与字符画预览：有色格显示 ■、空白格显示 ·，每行符号数等于网格边长。导出两条通路：字符画写进 .txt，CSS 用 16px 步进的 box-shadow 复现每个有色格，生成一条 .pixel-art 规则。本页不读取本地图片、不做色彩量化，也不做放大插值。
典型使用场景
- 手绘 8×8 / 16×16 像素头像、图标或游戏素材草稿。
- 把网格作品导出为字符画，贴进文档、README 或聊天窗口。
- 导出 CSS 像素块，直接放进网页做装饰元素。
算例参考
- 8×8 预置笑脸：默认颜色橙色（#F59E0B）下共 48 个有色格、16 个空格；字符画为 8 行 × 8 个符号，CSS 导出含 48 条 box-shadow（0px 0px / 16px 0px / … 16px 步进）。
- 4×4 自绘两格：选蓝色（#3B82F6）绘制，点 (0,0) 与 (1,1) 后字符画为：
■··· ·■·· ···· ····
对应的 CSS 阴影为 0px 0px 0 #3B82F6 与 16px 16px 0 #3B82F6 两条。
- 空画布导出：24×24 未绘制时，CSS 导出只给出注释「画布为空：请先在网格上绘制像素」，不会生成空规则。
注意事项
改变网格尺寸会按新尺寸重建画布并清空已绘内容（8×8 例外，载入预置笑脸）；本页不做缩放重采样，需要保留作品请先导出。绘图状态只存在当前页面内存，刷新即重置。工具纯前端运行，绘制与导出都在本地完成，图案不会保存或上传。
- 导出的字符画能直接贴进 README 吗？
- 可以。字符画以 ■ 表示有色格、· 表示空白，每行符号数等于网格边长；贴进代码块并使用等宽字体时能保持对齐，比例字体可能让符号宽度不一致、出现错位。
- 为什么改变网格尺寸后已画的图案没了？
- 改变网格尺寸会按新尺寸重建画布：8×8 载入预置笑脸，其余尺寸为空白。本页不做缩放重采样，需要保留作品请先用「导出字符画 .txt」或「导出 CSS 像素块」保存。