Эффект разноцветной матрицы на HTML5 Canvas
|
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> |
