50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
const canvas = document.getElementById("matrix-canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const letters = "アァイィウヴエェオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
|
|
const fontSize = 16;
|
|
const frameInterval = 65;
|
|
let drops = [];
|
|
let lastFrameTime = 0;
|
|
|
|
function resizeCanvas() {
|
|
const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
|
|
const width = window.innerWidth;
|
|
const height = window.innerHeight;
|
|
canvas.width = Math.floor(width * pixelRatio);
|
|
canvas.height = Math.floor(height * pixelRatio);
|
|
canvas.style.width = `${width}px`;
|
|
canvas.style.height = `${height}px`;
|
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
|
|
|
const columns = Math.ceil(width / fontSize);
|
|
drops = new Array(columns).fill(1);
|
|
}
|
|
|
|
function drawMatrix() {
|
|
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
|
|
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
|
|
ctx.fillStyle = "#39FF14";
|
|
ctx.font = fontSize + "px monospace";
|
|
|
|
for (let i = 0; i < drops.length; i++) {
|
|
const text = letters[Math.floor(Math.random() * letters.length)];
|
|
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
|
|
if (drops[i] * fontSize > window.innerHeight || Math.random() > 0.975) {
|
|
drops[i] = 0;
|
|
}
|
|
drops[i]++;
|
|
}
|
|
}
|
|
|
|
function animate(timestamp) {
|
|
if (timestamp - lastFrameTime >= frameInterval) {
|
|
drawMatrix();
|
|
lastFrameTime = timestamp;
|
|
}
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
resizeCanvas();
|
|
requestAnimationFrame(animate);
|
|
window.addEventListener("resize", resizeCanvas);
|