畫素畫生成器 使用指南
在 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 畫素塊」儲存。