Изображение с помехами при помощи HTML5 Canvas

Изображение с помехами при помощи HTML5 Canvas

От автора: В течение уже некоторого времени я изучаю, как можно создать изображение с помехами при помощи веб-технологий html5. В canvas API можно изменять растровые изображения по пикселям, но вчера я осознал, что с помощью довольно простой функции API можно создавать изображения с эффектом графического мусора.

Перенос изображений в Canvas

Начнем мы с тега canvas, как показано в CodePen демо:

Обратите внимание, что изначальные размеры тега произвольные. Они будут изменяться при помощи JavaScript. И код CSS:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

JS код для рисования в canvas делится на два общих шага. Первым делом мы загружаем соответствующее растровое изображение:

После полной загрузки изображения мы отрисовываем его на полотно при помощи функции draw. Сначала мы проверяем, чтобы размер полотна совпадал с размером загружаемого изображения:

Если все нормально, изображение ляжет на canvas один к одному. То есть высота и ширина изображения заполнят такую же по размеру область на холсте, начиная от левого верхнего угла (0, 0) до нижнего правого. Синтаксис будет выглядеть примерно так:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

Тем не менее, нигде не сказано, что нужно брать все изображение и переносить его на холст целиком сразу. Мы можем нарезать изображение на полоски и выкладывать их на canvas со смещенным горизонтальным значением. Для этого нам понадобится две переменные: количество полосок и максимальное горизонтальное смещение. Код ниже – продолжение функции draw:

Полоски отрисовываются внутри цикла for:

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

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

Заключение

Различные вариации данной техники можно использовать динамически: к примеру, можно наложить на canvas два потока HTML5 видео и сделать сравнение «до-после».

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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