t-test3
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Lines</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const lineCount = 10; //
const lineWidth = 4; // ラインの幅
const lineSpacing = 20; // ライン間のスペース
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// ラインの描画
function drawLines() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.strokeStyle = "blue";
context.lineWidth = lineWidth;
for (let i = 0; i < lineCount; i++) {
const y = (i * lineSpacing) + (lineSpacing / 2);
context.beginPath();
context.moveTo(0, y);
context.lineTo(canvasWidth, y);
context.stroke();
}
}
// ページ読み込み時にラインを描画
drawLines();
</script>
</body>
</html>
<
使用変数
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Lines</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const lineCount = 10; //
const lineWidth = 4; // ラインの幅
const lineSpacing = 20; // ライン間のスペース
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// ラインの描画
function drawLines() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.strokeStyle = "blue";
context.lineWidth = lineWidth;
for (let i = 0; i < lineCount; i++) {
const y = (i * lineSpacing) + (lineSpacing / 2);
context.beginPath();
context.moveTo(0, y);
context.lineTo(canvasWidth, y);
context.stroke();
}
}
// ページ読み込み時にラインを描画
drawLines();
</script>
</body>
</html>
<
使用変数
| canvas | |
| canvasHeight | |
| canvasWidth | |
| context | |
| drawLines -------( Function ) | |
| height | |
| i | |
| id | |
| lineCount | |
| lineSpacing | |
| lineWidth | |
| strokeStyle | |
| width | |
| y |