Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Эффект Матрицы на HTML5
Эффект Матрицы на HTML5
AndreyДата: Суббота, 08.02.2014, 18:59:13 | Сообщение # 1
Технарь
Offline
3

Матрица один из кассовых фильмов своего времени. Обои с этим фильмов наверно стояли у каждого третьего пользователя. Но вот пришла эра HTML5! Так давайте же и наш браузер превратим в Матрицу. Вот это я загнул... Ну ладно приступим к делу!

Смотрим мой тест на Фидле

Между<body> и <body> прописываем id будет выводить нашу матрицу:
Код
<canvas id="q"></canvas>


И сразу после id пропишем не большой скрипт:
Код
<script>
var s = window.screen;  //Переменная для выясняющая размер вашего экрана  
var width = q.width = s.width;  
var height = q.height = s.height;  
var letters = Array(256).join(1).split('');  

var draw = function () {  
   q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; //Тут цвет фона  
   q.getContext('2d').fillRect(0,0,width,height);  
   q.getContext('2d').fillStyle='#0F0'; //Тут цвет букв  
   letters.map(function(y_pos, index){  
   text = String.fromCharCode(65+Math.random()*33);  
   x_pos = index * 10;  
   q.getContext('2d').fillText(text, x_pos, y_pos);  
   letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;  
   });  
};  
  setInterval(draw, 33);  
</script>


Вот и всё, согласитесь довольно просто!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Эффект Матрицы на HTML5
Страница 1 из 11
Поиск: