HTML上で集中線をランダム描画の改良版でパラメータを入力できるようにしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>入力値でランダムに描画される集中線</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80vh;
background: #000;
}
canvas {
background: #000000;
border: 1px solid #808080;
margin-top: 10px;
}
.controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
input {
width: 50px;
align-items: center;
padding: 5px;
}
button {
padding: 3px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2><font color="#ffffff">
なにこれ？Random Concentration Line</font></h2>
<div class="controls">
<font color="#ffffff">
<label>線の本数: <input type="number"
id="lineCount" value="100" min="1"></label>
<label>最短長さ: <input type="number"
id="minLength" value="50" min="1"></label>
<label>最長長さ: <input type="number"
id="maxLength" value="200" min="1"></label>
<label>線の太さ: <input type="number"
id="lineWidth" value="2" min="1"></label>
<label>線の色: <input type="color"
id="lineColor" value="#ffff00" min="1"></label>
<button onclick="drawSpeedLines()">描画</button>
</font>
</div>
<canvas id="speedLinesCanvas"></canvas>
<script>
function drawSpeedLines() {
const canvas =
document.getElementById("speedLinesCanvas");
const ctx = canvas.getContext("2d");
// キャンバスサイズ
canvas.width = 500;
canvas.height = 500;
// 中心座標
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// ユーザー入力取得
const lineCount =
parseInt(document.getElementById("lineCount").value);
const minLength =
parseInt(document.getElementById("minLength").value);
const maxLength =
parseInt(document.getElementById("maxLength").value);
const lineWidth =
parseInt(document.getElementById("lineWidth").value);
const lineColor =
document.getElementById("lineColor").value;
// 背景クリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 線の描画設定
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
for (let i = 0; i < lineCount; i++) {
const angle = Math.random() * Math.PI * 2;
// 0〜360°のランダム角度
const length = minLength + Math.random() *
(maxLength - minLength); // ランダムな長さ
const endX = centerX + Math.cos(angle) * length;
const endY = centerY + Math.sin(angle) * length;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(endX, endY);
ctx.stroke();
}
}
// 初回描画
drawSpeedLines();
</script>
</body>
</html>
実行直後の状態です。
カラー設定は［RGB］［HSL］［HEX］の3種類対応。
［描画］で設定値を元にランダム描画します。
