溫馨提示×

如何使用canvas制作炫酷黑客帝國數字雨背景

小億
138
2023-07-27 23:20:26
欄目: 編程語言

要制作炫酷的黑客帝國數字雨背景，你可以使用HTML5的元素和JavaScript來實現。以下是一個簡單的示例：

HTML代碼：

<canvas id="matrix"></canvas>

CSS代碼：

body {
margin: 0;
overflow: hidden;
}
canvas {
background-color: black;
}

JavaScript代碼：

// 獲取canvas元素
var canvas = document.getElementById("matrix");
var ctx = canvas.getContext("2d");
// 設置畫布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定義字符集
var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
characters = characters.split("");
// 定義每個字符的寬度和高度
var charWidth = 15;
var charHeight = 20;
// 定義每列的字符數量
var columns = canvas.width / charWidth;
// 創(chuàng)建一個數組來保存每個字符的位置和速度
var drops = [];
for (var i = 0; i < columns; i++) {
drops[i] = 1; // 初始位置
}
// 繪制字符雨
function draw() {
// 繪制背景
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 設置字符樣式
ctx.font = charHeight + "px monospace";
ctx.fillStyle = "#0F0"; // 綠色
// 繪制每個字符
for (var i = 0; i < drops.length; i++) {
// 生成隨機字符
var randomCharacter = characters[Math.floor(Math.random() * characters.length)];
// 繪制字符
ctx.fillText(randomCharacter, i * charWidth, drops[i] * charHeight);
// 更新位置
if (drops[i] * charHeight > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
// 每隔一段時間調用draw函數來刷新畫面
setInterval(draw, 33);

通過將以上代碼保存為一個HTML文件并在瀏覽器中打開，你就可以看到一個炫酷的黑客帝國數字雨背景了。你可以根據需要調整字符集、字符大小和畫布大小等參數來獲得不同的效果。

0 踩