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/>