요새 포스팅을 잘 안해서 아무거나 올리느라 해봤습니다. 랜덤한 좌표에 선긋기 입니다. 선의 개수를 변경할 수 있습니다. (3~10)
<!DOCTYPE html>
<style>
#myCanvas {
border: 2px solid lightgray;
max-width: 100%;
box-sizing: border-box;
}
</style>
<p>
<input id="count" type="number" value="7" min="3" max="10"
onchange="changeCount()" style="font-size: 20px;">
</p>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 3;
ctx.lineJoin = "round"
count = 7;
function changeCount() {
var n = Number(document.getElementById("count").value);
if (isNaN(n)) return;
count = Math.min(Math.max(3, n), 10);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (var i = 0; i < count; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
if (i == 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
setTimeout(draw, 500);
}
draw();
</script>