<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コードレインアニメーション</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="digitalRain"></canvas>
<script>
const canvas = document.getElementById('digitalRain');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const symbols = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const charArray = symbols.split('');
const fontHeight = 20;
const columnCount = Math.floor(canvas.width / fontHeight);
const fallingChars = Array(columnCount).fill(1);
function generateHSLColor() {
const hue = Math.floor(Math.random() * 360);
return `hsl(${hue}, 100%, 50%)`;
}
function renderFrame() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = `${fontHeight}px monospace`;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
for (let i = 0; i < fallingChars.length; i++) {
const randomChar = charArray[Math.floor(Math.random() * charArray.length)];
ctx.fillStyle = generateHSLColor();
ctx.fillText(randomChar, i * fontHeight, fallingChars[i] * fontHeight);
if (fallingChars[i] * fontHeight > canvas.height || Math.random() > 0.98) {
fallingChars[i] = 0;
}
fallingChars[i]++;
}
}
setInterval(renderFrame, 40);
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>技術的詳細
1. HTML構造
<canvas id="digitalRain"></canvas>- HTML5の<canvas>要素を使用し、ID「digitalRain」でJavaScriptから操作可能にしています
- 動的な描画を可能にするための2D描画コンテキストを取得
2. CSS設定
body {
margin: 0;
overflow: hidden;
background: #000;
}
canvas {
display: block;
}- ページ余白の除去とスクロール防止
- 黒背景でサイバーパンクな雰囲気を演出
- canvas要素をブロック要素として扱い、レイアウトを安定させる
3. JavaScript処理
初期化処理
const canvas = document.getElementById('digitalRain');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;- キャンバス要素の取得と2Dコンテキストの初期化
- 画面サイズに合わせたキャンバスのリサイズ
描画パラメータ設定
const symbols = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const charArray = symbols.split('');
const fontHeight = 20;
const columnCount = Math.floor(canvas.width / fontHeight);
const fallingChars = Array(columnCount).fill(1);- 使用する文字セットの定義と配列化
- 文字の高さと列数の計算
- 各列の初期位置を管理する配列の生成
色生成関数
function generateHSLColor() {
const hue = Math.floor(Math.random() * 360);
return `hsl(${hue}, 100%, 50%)`;
}- HSL色空間を使用したランダムな発光色生成
- より印象的な視覚効果を実現
描画関数
function renderFrame() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = `${fontHeight}px monospace`;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
for (let i = 0; i < fallingChars.length; i++) {
const randomChar = charArray[Math.floor(Math.random() * charArray.length)];
ctx.fillStyle = generateHSLColor();
ctx.fillText(randomChar, i * fontHeight, fallingChars[i] * fontHeight);
if (fallingChars[i] * fontHeight > canvas.height || Math.random() > 0.98) {
fallingChars[i] = 0;
}
fallingChars[i]++;
}
}- 透明度を持つ背景塗りつぶしによるトレース効果
- ランダムな文字選択と発光色の適用
- 列ごとの位置更新と再初期化ロジック
イベントハンドラ
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});- 画面リサイズ時の自動適応処理
- レスポンシブな表示を実現
使用方法
- HTMLファイルとして保存
- ブラウザで開く
- 文字セットを変更する場合は「symbols」定義を編集
- 色の調整が必要な場合はgenerateHSLColor関数をカスタマイズ