<!doctype html>
<html>
<head>
<script>
function my_clicked(){
const canvas = document.getElementById("mycanvas");
const ctx = canvas.getContext("2d");
const arraysize = document.getElementById("arraysize").value;
ctx.clearRect(0, 0, 250, 250);
for (let i = 0; i < arraysize;i++){
ctx.beginPath();
let x = Math.floor(Math.random() * 200);
let y = Math.floor(Math.random() * 200);
let x2 = Math.floor(Math.random() * 200);
let y2 = Math.floor(Math.random() * 200);
ctx.moveTo(x, y);
ctx.lineTo(x2,y2);
ctx.stroke();
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="250" height="250"></canvas>
<br>
<input type="button" onclick="my_clicked()" value="сгенерировать массив линий">
<br>
Количество случайных линий:
<br>
<input type="text" id="arraysize" value="50">
</body>
</html>
|