<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<script>
let canvas= document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let y1 = 25;
let i = setInterval(function(){
let randomColor = Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = '#'+randomColor;
ctx.beginPath();
let x1 = Math.random()*450+50;
let y1 = Math.random()*450+50;
let x2 = Math.random()*450+50;
let y2 = Math.random()*450+50;
ctx.arc(x1,y1,25,0,Math.PI*2);
ctx.fill();
ctx.lineTo(x1+Math.random()*50, y1+Math.random()*50);
ctx.lineTo(x2+Math.random()*50, y2+Math.random()*50);
ctx.stroke();
},1000);
</script>
</body>
</html>
|