我想把这个"矩阵效果"设置为我的html5网站的背景，但是每当我试图把元素放在画布的"上方"时，这些元素就会随着画布的文本消失.同样的文本也会呈现在图像上方.
我试着做一个单独的画布来放置图像，但它只是移动图像. 我也try 过这种"矩阵效应"的几种变体，但它们都是用同样的方法来淡出字母.
const canvas = document.getElementById('background_canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;
const columns = canvas.width / fontSize;
const rainDrops = [];
for (let x = 0; x < columns; x++) {
rainDrops[x] = 1;
}
const draw = () => {
context.fillStyle = 'rgba(0, 0, 0, 0.05)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#0F0';
context.font = fontSize + 'px monospace';
for (let i = 0; i < rainDrops.length; i++) {
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
context.fillText(text, i * fontSize, rainDrops[i] * fontSize);
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
rainDrops[i] = 0;
}
rainDrops[i]++;
}
};
setInterval(draw, 30);html {
background: black;
height: 100%;
overflow: hidden;
}
body .canvas #background_canvas {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
body #foreground {
background-color: transparent;
fill-opacity: 100%;
}<div id="background">
<script src="assets/js/background.js" type="module"></script>
<canvas id="background_canvas" style='position:absolute; left:0; top:0;'>Cannot Render Canvas</canvas>
</div>
<div id="foreground">
<script src="assets/js/app.js" type="module"></script>
<canvas id="foreground_canvas"></canvas>
<img src="assets/images/pfp.png" alt="My Profile Picture">
</div>