Skip to content
html
<canvas id="myCanvas"width="1529" height="943">
<script>
        // 刷新页面
        function refreshPage() {
            location.reload();
        }

        // 初始化画布
        var canvas = document.getElementById('myCanvas'),
            ctx = canvas.getContext('2d');

        // 设置画布的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 设置字母
        var letters = 'LeetCode LeetCode LeetCode LeetCode LeetCode LeetCode LeetCode';
        letters = letters.split('');

        // 设置列数
        var fontSize = 10,
            columns = canvas.width / fontSize;

        // 设置下落位置
        var drops = [];
        for (var i = 0; i < columns; i++) {
            drops[i] = 1;
        }

        // 设置颜色
        var colors = ['#05FF00', '#00BFFF', '#FF4500', '#FFA500', '#C202C2'];
        var lightBackgroundColors = ['#013600', '#002E3D', '#3E1100', '#342100', '#3C003C']
        var colorIndex = Math.floor(Math.random() * colors.length);

        // 绘制函数
        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, .1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = colors[colorIndex];
            for (var i = 0; i < drops.length; i++) {
                var text = letters[Math.floor(Math.random() * letters.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                drops[i]++;
                if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
                    drops[i] = 0;
                }
            }
        }

        // 循环动画
        setInterval(draw, 30);

        var light = document.querySelector('.light');
        light.style.background = colors[colorIndex];

        // 设置呼吸灯的背景颜色
        var lightWrapper = document.querySelector('.light-wrapper');
        lightWrapper.style.backgroundColor = lightBackgroundColors[colorIndex];
<script/>