Канвас из пиксель-артов и экспорт в CSS

Канвас из пиксель-артов и экспорт в CSS

Рисуйте резкие 8-битные спрайты прямо в браузере и экспортируйте их как чистый CSS-арт с эффектом теней, масштабируемый SVG, растровый PNG или портативный JSON. Холст масштабируется от 8×8 до 64×64, включает классические палитры (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16), и предоставляет инструменты рисования, стирания, заполнения и измерения с неограниченным числом операций отмены и повтора.

Как использовать

1. Выберите размер сетки от 8×8 до 64×64. Большие сетки дают больше деталей, но замедляют скорость рисования.
2. Выберите предустановленную палитру или введите любой шестнадцатеричный цвет в цветовой выборник.
3. Нажмите кнопку рисования, стирания, заполнения или измерения в панели инструментов холста — или нажмите P, E, F, I.
4. Нажмите и перетащите на холсте для рисования. Используйте Ctrl+Z и Ctrl+Y для отмены и повтора.
5. Выберите формат экспорта (CSS box-shadow, SVG, PNG data URI или JSON), установите размер пикселя, затем скопируйте код или загрузите файл.

Возможности

• Шесть размеров сетки — 8×8, 16×16, 24×24, 32×32, 48×48 и 64×64 для любых объектов от небольших иконок до полных листов спрайтов.
• Семь предустановленных палитр — NES (54 цвета), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16 и градиент серого.
• Четыре инструмента рисования — рисование, стирание, кисть (заполнение), и измеритель с одноклавишными сокращениями.
• Гладкое рисование при перетаскивании — алгоритм Бресенхема обеспечивает непрерывность линий даже на маленьких экранах.
• Неограниченное отмена и повтор — история из 60 шагов с клавишами Ctrl+Z и Ctrl+Y.
• Четыре формата экспорта — CSS box-shadow, SVG, PNG data URI и JSON с данными сетки, каждый с живым 1:1 предварительным просмотром.
• Поддержка сенсорного ввода — работает на планшетах и телефонах с поддержкой сенсорного ввода и событий указателя.
• Прозрачные ячейки — пустые пиксели остаются прозрачными во всех форматах экспорта, а не заполняются белым цветом.