Генерация помех в HTML5 Canvas

Генерация помех в HTML5 Canvas

От автора: мои недавние статьи о canvas анимации, имитации звездного неба и создании генератора случайных чисел вылились в эксперимент по созданию телевизионных помех… и так вышло, что все эти темы связаны. Как и в статье со звездным небом, в данном уроке будет разбор кода с примерами.

Статические помехи

Первая задача – создать помехи, как в примере выше. С изображением все легко: берем тег canvas с заданными шириной и высотой и заполняем его маленькими прямоугольниками разных оттенков серого. Сам canvas элемент:

Исходные переменные скрипта, который нужно поместить в нижнюю часть страницы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На это основе можно написать функцию генерации помех:

В функции есть два цикла for, один в другом. Первый цикл работает вертикально. В качестве инкремента выступает переменная smallestPixel. Внутренний же цикл работает горизонтально и заполняет все ряды квадратиками HSL цвета. Ряды заполняются последовательно.

Чтобы затемнить пиксели помех, уменьшите значение lum. Чтобы сделать их тоньше, уменьшите значение smallestPixel. Помехи можно превратить в прямоугольники, задав разные значения высоты и ширины пикселя, или же изменяя значение smallestPixel.

Как растянуть canvas на весь экран

Чтобы canvas заполнял всю страницу, мы прибегнем к старой и проверенной CSS технике:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Оптимизация времени отрисовки

Если canvas составляет 800 пикселей в ширину и 400 в высоту, а каждый пиксель размером 4х4, то в ряду получается 200 пикселей, а всего отрисовать необходимо 20 000 квадратиков. JS вполне может справиться с этой задачей, но могут возникнуть трудности при отрисовке прямоугольников (30 раз в секунду). Если мы еще захотим анимировать все элементы, нам потребуется уменьшить их количество.

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

После чего пространство хаотично заполняется прямоугольниками разной ширины и высоты (значения не могут выходить за определенные рамки). Высота и ширина прямоугольника будет также определять его расположение: элемент позиционируется от 0 до значения ширины или высоты поля canvas (меньше разрешения пикселя). С помощью новой функции мы создадим 1 200 прямоугольников. Сперва, я воспользуюсь функцией из статьи про создание генератора случайных чисел:

Остальной код, как в предыдущем примере:

Функция drawStatic также изменилась:

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree