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 50 51 52 53 54 55 56 57 58 59 60 61 62
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World</title> <style> body { background: #000; margin: 0; padding: 0; overflow: hidden; text-shadow: 0px 0px 80px; } </style> </head> <body> <canvas id="canvas"></canvas>
<script> var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') canvas.height = window.innerHeight canvas.width = window.innerWidth
var texts = 'Hello World'.split('') var fontSize = 16 var columns = canvas.width / fontSize var drops = [] for (var x = 0; x < columns; x++) { drops[x] = 1 }
function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)' ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = '#0F0' ctx.font = fontSize + 'px arial' for (var i = 0; i < drops.length; i++) { var text = texts[Math.floor(Math.random() * texts.length)] ctx.fillText(text, i * fontSize, drops[i] * fontSize)
if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) { drops[i] = 0 }
drops[i]++ } } setInterval(draw, 33) </script> </body> </html>
|