Создание PixelArt на HTML и JS

Создание PixelArt на HTML и JS

Создание 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 картин.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий