HTML5是當今最流行的網頁設計語言之一，它不僅讓網站變得更加美觀、簡潔，而且還可以讓我們實現很多閃亮的效果，比如代碼雨。

// 定義代碼雨對象
function CodeRain(canvasId, text) {
var c = document.getElementById(canvasId);
var ctx = c.getContext("2d");
var font_size = 15;
var columns = c.width / font_size; // 列數
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, c.width, c.height);
ctx.fillStyle = "#0F0"; // 文字顏色
ctx.font = font_size + "px arial";
for (var i = 0; i< drops.length; i++) {
var text = text[Math.floor(Math.random() * text.length)];
ctx.fillText(text, i * font_size, drops[i] * font_size);
drops[i]++;
if (drops[i] * font_size >c.height && Math.random() >0.975) {
drops[i] = 0;
}
}
}
// 加載
this.load = function() {
setInterval(draw, 33);
}
}
// 初始化
var text = "abcdefghijklmnopqrstuvwxyz0123456789";
var codeRain1 = new CodeRain("canvas1", text);
var codeRain2 = new CodeRain("canvas2", text);
codeRain1.load();
codeRain2.load();

如上所示，我們可以通過定義一個包含文字和列數的對象，然后和setInterval結合起來，讓文字在畫布上下落。最終的效果就是一場絢爛多彩的代碼雨，讓你的網頁更為生動有趣。