Статьи

Как генерировать шум с помощью Canvas

Не так давно я заметил в Твиттере, что было бы замечательно, если бы однажды CSS3 предоставил поддержку для добавления шума к элементам (не аудио, а текстура). После нескольких экспериментов и поиска в Google , я наткнулся на решение, которое использует JavaScript и canvas для динамического создания шума.



1
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″ /> <title>Noise</title> </head> <body> <script> function generateNoise(opacity) { if ( !!!document.createElement(‘canvas’).getContext ) { return false;

Большой вопрос: практично ли использовать такое решение? Эхх — технически, конечно. Браузеры, которые не поддерживают canvas , просто отобразят сплошной цвет фона. При этом крошечный 24-битный PNG по-прежнему работает отлично, и я, скорее всего, буду продолжать его использовать, пока не станет доступно более удобное решение.

Как вы думаете? Или еще лучше, вы знаете о лучшем решении? Главным образом, цель этого урока в основном немного поработать с canvas и поиграть с вещами! Спасибо за просмотр, и спасибо Деннису Хотсону за концепцию.