Делает его кодом дождя – матричный стиль

Автор оригинала: FreeCodeCamp Community Member.

Курт

Введение в HTML 5 Canvas Animations

Из всех великих вещей HTML 5 принес нам, я люблю элемент холста больше всего. Я надеюсь, что, когда вы увидите, насколько это мощно, вы захотите поставить в то время, чтобы овладеть анимацией холста самостоятельно.

Что такое холст?

Холст именно то, что подразумевает его название. Это пустой холст, который вы можете покрасить, как вы хотите, а затем рендерируйте в своем браузере в виде изображения. Настоящая красота состоит в том, что он не только позволяет создавать изображения, но и непрерывно RedRaw & Render их – отсюда, создавая анимацию.

Мощность холста ограничена только вашим воображением. Я использовал элемент холста, чтобы создать все из статических изображений на Fly до игр, графические пользовательские интерфейсы. И даже по электронной почте стиль MailChimp. Вы даже можете сделать холст в 3D!

Для меня элемент холста изменил все. Я больше не ограничивал использование HTML-тегов по умолчанию. Я мог бы создать все, что я хотел в браузере. И вам лучше поверить, что это подталкивает мои навыки JavaScript на целый новый уровень.

Начиная

Вместо того, чтобы демонстрировать, как просто нарисовать на холсте, я хочу дать вам проблеск того, что вы можете создать с ним. Если вы еще не видели матрицу, прекратите читать сейчас и посмотреть его. Если вы его видели, вы узнаете знаменитый «падающий код» из названия. Давайте создадим это с холстом!

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

HTML:

CSS:

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

JavaScript:

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var t = text();var logo = document.getElementById('logo');var lines = [];window.setInterval(draw, 100);

function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) {  lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {

  ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);

}

function textLine() { this.text = t; this.posX = (function() {  return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() {  if (this.offsetY >= 0) {   this.offsetY = -1000;  }  this.offsetY += 10;  return this.offsetY; };}

function text() { var offscreenCanvas = document.createElement('canvas'); offscreenCanvas.width = "30"; offscreenCanvas.height = "1000"; offscreenCanvas.style.display = "none"; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext('2d'); octx.textAlign = "center"; octx.shadowColor = "lightgreen"; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = 'darkgreen'; octx.textAlign = "left"; var step = 10; for (i = 0; i < 100; i++) {  var charCode = 0;  while (charCode < 60) {   charCode = Math.floor(Math.random() * 100);  }  octx.fillText(String.fromCharCode(charCode), 0, step);  step += 10; } return offscreenCanvas;}

Как это работает?

В линии № 1 мы снимаем элемент холста по его идентификатору. Каждый элемент холста имеет свой контекст – Интерфейс для манипулирования его содержимым. Это то, что CTX Переменная на линии 2 относится к.

Для создания анимированного фона нам понадобится вертикальная линия случайного текста, которую мы будем перерисовать несколько раз поось X и постепенно анимируйте на оси Y, чтобы дать нам конечный эффект.

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

На линии № 3 мы устанавливаем переменную T к результату Текст () Функция, которая генерирует и возвращает наш невидимый элемент холста.

В этой функции мы создаем новый холст, установите ее ширину и высоту и устанавливаете свой свойство отображения, чтобы никто не скрыть его, а затем добавить его в тело документа. Затем мы устанавливаем цвет, тень и смещение для текста, который мы будем рисовать.

Чтобы генерировать вертикальные случайные символы, которые мы петли и нарисуйте новый случайный символ 100 раз и увеличивайте его на 10px на оси Y на каждый интервал. Сгенерировать случайный символ, который я использую Math.random () Чтобы получить номер от 60 до 100, а затем преобразовать его в символ, используя String.fromCharCode ().

Это рисует наш вертикальный текст с тенью и возвращает холст в T переменную.

Анимационная петля

В течение следующей 3 строки кода я извлекаю логотип FreeCodeCamp, объявляя массив, который будет удерживать отдельные строки, которые составляют фоном и использовать Window.SetIntererval Чтобы запустить Рисовать () Функция каждые 100 миллисекунд.

При анимировании холста, это хорошая практика, чтобы скорее использовать window.requestanimationFrame (), Но я чувствовал, что это слишком запутанно для начинающих, так как немного сложно установить частоту кадров.

Первое, что Рисовать () Функция делает создание случайного числа между 1 и 0. Если число 0, и на заднем плане на заднем плане число 0, и на заднем плане меньше 100 отдельных линий текста. Текстовая линия () в массив линии.

Текстовая линия () Функция возвращает объект, который содержит

1. Полученный вертикальный текст удерживается в T Переменная.
2. Сумма смещения, которую он будет отображаться на оси x (сгенерирован случайным образом на каждом экземпляре объекта).
3. Начальное смещение -1000px на оси Y, которая помещает его чуть выше холста.
4. Метод Animate, который добавляет 10px на ось Y каждый раз, когда он вызывается и возвращает результат, сделав текст двигаться вниз. Если осес y-осевой оси достигает 0, он сбрасывается до -1000px, обеспечивая постоянную анимацию.

Холст очищается, а затем Рисовать () Функция петлей через каждую строку текста в линии Массив и рисует его на холсте, вызывая его анимация Метод каждый раз, когда линия нарисована, чтобы переместить его вниз.

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

Наконец, логотип FreeCodecamp нарисован на заднем плане, давая нам нашу последнюю анимацию.

Где сейчас?

Если холст – это то, что вас интересует, вы можете узнать больше об этом в Mozilla Docs Отказ

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

Если вы не нашли вышеуказанный код слишком сложным и хотели бы с этим беспорядок, вот несколько прохладных идей:

1. Сделайте динамические размеры так, чтобы масштабировать холст и продолжают анимацию при изменении изменения вашего браузера.
2. Вместо случайным образом генерирующих символов, возьмите файл своего собственного кода из GitHub и оживите это вместо этого.
3. Делайте свое имя вместо логотипа FreeCodecamp и заставить его выглядеть как матричный плакат.
4. Вместо того, чтобы генерировать каждую строку на случайном случае, свяжите событие Click к Canvas и представьте новую строку в координатах X вашего щелчка мыши.

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

Переключение кода наличными – как заработать деньги в качестве веб-разработчика и жить, чтобы рассказать историю. Так что вы только что научились кодировать. Вы хотите, и все, кто не умеет код думать, что ты гений, слово выходит и все … Medile.com Как написать jQuery, как библиотека в 71 строки кода – узнайте о DOM JavaScript Frameworks – это ярость. Скорее всего, любой JavaScript, связанные с новостями, вы открыты, будут засорены … Medile.com 5 вещей, которые нужно помнить, когда вы учитесь программировать Обучение программе является сложной. Помимо выбора языка или создания среды развития, которую вы … Medile.com Как я стал программистом. И когда я начал звонить в один Я хотел начать вести ведение программирования в течение нескольких месяцев и вроде так много других, прежде чем я, я поставил … Medile.com Профилактическое программирование – как исправить ошибки, прежде чем они произойдут … а почему Шерлок Холмс был бы блестящим программистом Medium.com.