Приближается национальный праздник "Холст" 🇨🇳, "раскрась" кролика и расскажи о своих мечтах

внешний интерфейс JavaScript Canvas
Приближается национальный праздник "Холст" 🇨🇳, "раскрась" кролика и расскажи о своих мечтах

Всем привет, я Ханцао😈, травяная обезьяна🐒. Прерывистая кровь 🔥, сплошная скульптура из песка 🌟
Если вам понравилась моя статья, вы можете подписаться➕Нравится и расти вместе со мной~

Я участвую в творческом конкурсе «Праздник середины осени».Творческий конкурс «Праздник середины осени»

Национальный день, я посылаю подарок

Предисловие - Жизнь нуждается в ощущении ритуала

Всем привет, я ваш партнер Хань Цао 🌿 , Фестиваль Середины Осени прошел, интересно хорошо ли вы провели отпуск, а я все равно занят, вздох 😮‍💨 . Я думаю, что после праздника Середины осени все сразу же начнут с нетерпением ждать праздника Национального дня, а также будет много друзей, которые не поехали домой во время Праздника середины осени из-за нехватки времени, но готовятся к поездке. дома, чтобы встретить своих родственников в Национальный день.Я могу только сказать, я же, Ха-ха-ха-ха.

Друзья, которые знают меня, знают, что я молодой человек, который любит жизнь, и я также хочу сделать эти значимые дни более церемониальными, поэтому я все еще хочу отправить вам подарок к Национальному дню~

Советы по холодной траве 🌿: в жизни нужно чувство ритуала

Разработка подарка - все о созерцании

Так вот вопрос какой подарок тебе подарить?Трудно подумать.Я думал о многих темах:

  • пятьдесят шесть наций пятьдесят шесть цветов
  • Я ни на миг не расстанусь с родиной
  • С 72-летием, моя Родина

Но я думаю, что оживление контента соответствует динамичному и динамичному развитию нашей Родины. и должен содержать элемент:

  • китайский флаг

Я начал картину материала всех видов национальных часов, я планирую получить вдохновение от этого, вдруг картина вводится в глаза, то есть мне очень нравится во время колледжа:

natu.jpeg

Анимация говорила о конкретно, что я не скажу, в конце концов, я также высокотехнологичный холодный мальчик, я начал думать, если я возьмуh5+css

Я рисую не выглядит хорошо!

Итак, давайте начнем с идеи.Я просматриваю информацию об изображении дважды сверху вниз и слева направо, встречая внезапное изменение значения цвета (ввод нового цветового блока) и обнаруживая цвет, близкий к черному (может быть, обводка или цвет). ) Fill), чтобы заполнить точку черным цветом.

Зачем сканировать дважды сверху вниз и слева направо?
处理水平和垂直的线

См. код ниже:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>line-art</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <canvas id="my-canvas"></canvas>
  <script>
    let myCanvas = document.getElementById("my-canvas");
    let cxt = myCanvas.getContext("2d");
    const natuImage = new Image();
    natuImage.src = "natu.jpeg";
    natuImage.onload = (ev) => {
      let { height, width } = ev.path[0];
      natuImage.width = width;
      natuImage.height = height;
      myCanvas.width = width;
      myCanvas.height = height;
      cxt.drawImage(natuImage, 0, 0);
      let imageData = cxt.getImageData(0, 0, width, height).data;
      cxt.fillStyle = "#ffffff";
      cxt.fillRect(0, 0, width, height);
      let currentR, currentG, currentB;
      for (let h = 0; h < height; h += 1) {
        for (let w = 0; w < width; w += 1) {
          let position = (width * h + w) * 4;
          let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
          if (Math.abs((r + g + b) - (currentR + currentG + currentB))> 65 || r + g +b < 95) {
            cxt.fillStyle = `rgba(0, 0, 0, 1)`;
            cxt.fillRect(w, h, 1, 1);
          } 
          currentR = r;
          currentG = g;
          currentB = b;
        }
      }
      for (let w = 0; w < width; w += 1) {
        for (let h = 0; h < height; h += 1) {
          let position = (width * h + w) * 4;
          let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2], a = imageData[position + 3];
          if (Math.abs((r + g + b) - (currentR + currentG + currentB))> 65 || r + g +b < 95) {
            cxt.fillStyle = `rgba(0, 0, 0, 1)`;
            cxt.fillRect(w, h, 1, 1);
          } 
          currentR = r;
          currentG = g;
          currentB = b;
        }
      }
    }
  </script>
</body> 
</html>

Так родился «раскрашенный вручную» кролик в холодной траве.Здесь я поздравляю всех с Национальным праздником и желаю нашей Родине процветания.

那年那兔.png

На самом деле, способность обработки этого уже хороша.Например, позвольте мне обработать для вас мое селфи:

image.png

Если вам нужно настроить, просто измените значение логики суждения в коде ~

Почему вывод такой длинный?

моя мечта

К чему моя мечта, на самом деле, это сложный вопрос. Я устал от работы, глядя вверх на звезды и наблюдая, как толпа сливается в реку. Я, может быть, самый обычный среди них, но Я до сих пор сохраняю молодой вид.Я не боюсь неба, я герой

Я не слишком отказываюсь от прогресса от винта до хорошего винта., но пытаясь получить отПроходи путь от инженера до творца, я думаю, что мое будущее может быть наполнено:

  • потерпеть неудачу
  • ошибка
  • потерянный
  • начать сначала

Но я думаю, что я должен бояться, потому что я испытал много всего, что я думаю, что могу принять меня сбой, я могу принять меня впасть в пропасть, или у меня все еще есть что-то не так после десятилетий, и я не могу Примите то, что я не могу принять это. Не бросайте, по крайней мере, сейчас я действительно думаю, что могу изменить мир в будущем.

Очень надеюсь, что все с нетерпением ждут будущего творчества Ханцао и не толькоhancao.designуже в пути.

Пасхальное яйцо и заключение - Посвящается будущему любителю Ханьцао

Во сне тоже есть любовь, с нетерпением жду прихода простой любви, очень простой, доверяя друг другу, полагаясь друг на друга, переживая вместе, гоняясь вместе и состыковываясь вместе, очень счастлива.

Код уже сложен, любите быть простым.

Таким образом, эффект, который должен быть достигнут в этой статье, еще не закончен.Следующие являются пасхальными яйцами работ Хань Цао:

"Посвящаю вам красочную весну, лето, осень и зиму, голубое небо и звездную реку
对不起我还没解决gif时间压缩的问题,效果就显得很急促

Подарите вам красочную весну, лето, осень и зиму

春夏秋冬.gif

подарить тебе голубое небо

蓝天.gif

Посылаю тебе звездное небо

星河.gif

Пусть жизнь красочна 🌈 ~

写在最后



Они мятеют
они вызывают проблемы
Они не вписываются в

Они видят вещи по-другому
Они не любят придерживаться правил
Они также не хотят соглашаться на статус-кво.
вы можете сделать им комплимент
цитировать их
против них
расспросить их
хвалить или унижать их

Но вы не можете просто игнорировать их
Потому что они меняют вещи
они изобретают
Они представляют
Они выделяются

Они создают
Они вдохновляют
Они толкают человечество вперед

Может быть, они сумасшедшие

Можете ли вы смотреть на чистый лист бумаги и видеть прекрасную картину?
Можете ли вы сидеть тихо и слушать красивую песню?
Можете ли вы смотреть на происходящее и думать о магии космоса?

Мы делаем хорошую "возможность" для этих ребят

Может быть, они сумасшедшие люди в глазах других
Но они гении в наших глазах
Потому что только люди, которые достаточно сумасшедшие, чтобы думать, что могут изменить мир
действительно может изменить мир
🌟

以及
未来的某一天
我想站在舞台中央

добавь меня в WeChat:hancao97Пригласите вас присоединиться к группе, узнать о текущей ситуации в группе GitHub Hancao🌿, учиться и общаться с интерфейсом вместе и стать лучшим инженером ~ (потому что количество людей в группе превышает 200, вы Не могу отсканировать код, чтобы войти в группу, вы можете добавить только WECHAT)