像素艺术画布及CSS导出
指导
像素艺术画布及CSS导出
Paint crisp 8-bit style sprites directly in your browser and export them as pure-CSS box-shadow art, scalable SVG, raster PNG, or portable JSON. The canvas scales from 8×8 up to 64×64, ships with classic palettes (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), and gives you paint, eraser, fill, and eyedropper tools with unlimited undo and redo.
如何使用
- Pick a grid size from 8×8 to 64×64. Larger grids give more detail but slower paint speed.
- Choose a preset palette or drop any hex colour into the colour picker.
- Click the paint, eraser, fill, or eyedropper button in the canvas toolbar — or press
P,E,F,I. - Click and drag on the canvas to paint. Use
Ctrl+Z且Ctrl+Yto undo and redo. - Pick an export format (CSS box-shadow, SVG, PNG data URI, or JSON), set the pixel size, then copy the code or download the file.
特征
- Six grid sizes – 8×8, 16×16, 24×24, 32×32, 48×48, and 64×64 for anything from tiny icons to full sprite sheets.
- Seven preset palettes – NES (54 colours), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16, and a grayscale ramp.
- Four drawing tools – paint, eraser, paint bucket (flood fill), and eyedropper with single-key shortcuts.
- Smooth drag drawing – Bresenham line interpolation keeps strokes continuous even on small screens.
- Unlimited undo and redo – 60-step history with Ctrl+Z and Ctrl+Y keyboard shortcuts.
- Four export formats – CSS
box-shadow, SVG, PNG data URI, and JSON grid data, each with a live 1:1 preview. - Touch support – works on tablets and phones with native touch and pointer events.
- Transparent cells – empty pixels stay transparent in every export format, not painted white.
常问问题
-
What is a pixel in digital imaging?
A pixel (short for picture element) is the smallest addressable unit of a raster image. Each pixel stores color information — typically red, green, and blue channel values between 0 and 255 — and together a grid of pixels forms a complete image.
-
How does CSS box-shadow render pixel art?
CSS box-shadow accepts multiple shadow declarations, each with an x offset, y offset, blur radius, spread radius, and color. Setting blur and spread to zero and positioning each shadow on a grid effectively paints individual coloured rectangles from a single 1x1 element — producing a pure-CSS pixel image without any raster data.
-
What is a limited colour palette and why is it used?
A limited palette restricts an artwork to a small fixed set of colours, often matching the hardware constraints of retro consoles such as the NES, Game Boy, or Commodore 64. Working within a palette creates visual cohesion, evokes a recognisable era, and forces deliberate colour choices instead of arbitrary ones.
-
What is the flood fill algorithm?
Flood fill is a graphics algorithm that starts at a target cell and spreads outward to every neighbouring cell that shares the same colour, replacing each with a new colour. Most paint-bucket tools use a four-directional flood fill (up, down, left, right) implemented with a stack or queue to avoid deep recursion.
-
Why are raster and vector pixel art different?
Raster pixel art is stored as a grid of coloured cells (PNG, data URI). Vector pixel art represents each cell as a mathematical shape (SVG or CSS box-shadow) that scales infinitely without losing crispness. Vector output is ideal for web UIs where shape-rendering: crispEdges preserves the blocky look at any zoom level.
