Создание PixelArt на HTML и JS
Здравствуйте. В сегодняшней статье мы рассмотрим создание простого PixelArt с помощью HTML и JavaScript. Данное направление считается одним из современных видов цифрового искусства. Итак, приступим. Для начала, создадим HTML разметку. Далее выделим элемент pixel и размножим его до требуемого количества. Затем добавим возможность выделения ячейки определенным цветом, при клике по ней. Перейдем к коду.
<!DOCTYPE html>
<html>
<head>
<title>Пиксель-арт с HTML и JS</title>
<style>
.pixel {
width: 10px;
height: 10px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<div id="canvas"></div>
<button onclick="savePixelArt()">Сохранить</button>
<script>
const canvas = document.getElementById('canvas');
let isDrawing = false;
function createPixel() {
const pixel = document.createElement('div');
pixel.className = 'pixel';
pixel.addEventListener('mousedown', () => {
isDrawing = true;
pixel.style.backgroundColor = 'red';
});
pixel.addEventListener('mouseover', () => {
if (isDrawing) {
pixel.style.backgroundColor = 'red';
}
});
pixel.addEventListener('mouseup', () => {
isDrawing = false;
});
return pixel;
}
function savePixelArt() {
const pixels = canvas.querySelectorAll('.pixel');
let pixelArt = '';
pixels.forEach((pixel, index) => {
pixelArt += pixel.style.backgroundColor === 'red' ? '1' : '0';
if ((index + 1) % 10 === 0) {
pixelArt += 'n'; // Добавляем перенос строки каждые 10 пикселей (можно изменить)
}
});
console.log(pixelArt); // Здесь можно использовать полученные данные, например, отправить на сервер или сохранить в файл
}
// Создаем сетку 20x20 пикселей
for (let i = 0; i < 100 * 100; i++) {
canvas.appendChild(createPixel());
}
</script>
</body>
</html>
Таким образом, мы создали подобие холста с пикселями на JavaScript для вывода PixelArt картин.
