Эффект разноцветной матрицы на HTML5 Canvas
Все прекрасно помнят знаменитый эффект из фильма "Матрица". Данная вариация из простых букв и чисел порадует вас своим цветастым исполнением
Для начала посмотрите ДЕМО
Моё тестирование в редакторе: КЛИК
Установка:
На нужных страницах между body и /body вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<canvas id='cvs'></canvas> <script> // Get canvas var cvs = document.getElementById('cvs'); // Canvas fills window cvs.height = window.innerHeight; cvs.width = window.innerWidth; // Get canvas context var ctx = cvs.getContext('2d'); // Set font, size & number of columns var font = 'arial'; var fontSize = 10; ctx.font = fontSize + 'px ' + font; var cols = cvs.width / fontSize; // Characters var charSet; charSet = '0123456789ABCDEF'; // Hex charSet = charSet.split(''); // Convert string to array // One drop per column, row set randomly var drops = []; for (var col = 0; col < cols; col++) drops[col] = Math.floor(Math.random() * cvs.height); // Call rain() every 25ms setInterval(rain, 25); function rain() { // Background, black, translucent /* This is key to the fade effect, clear the window with an alpha of 0.05, which doesn't clear it entirely but leaves existing text progressively dimmed with each subsequent call to rain() */ ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, cvs.width, cvs.height); // For each column / drop for (var col = 0; col < drops.length; col++) { // Pick a random char var char = charSet[Math.floor(Math.random() * charSet.length)]; // Pick a random colour ctx.fillStyle = randColour(); // Draw the char ctx.fillText(char, col * fontSize, drops[col] * fontSize); // Randomly reset drop back to top row if (Math.random() > 0.99) drops[col] = 0; drops[col]++; // Move drop down a row } } function randColour() { return 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'; } </script> |
