Вроде новая идея.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid
#d3d3d3;" onclick="press()">
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let angle = 0;
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
setInterval(function(){
++angle;
let var1 = Math.floor(Math.random()*200);
let var2 = Math.floor(Math.random()*200);
let var3 = Math.floor(Math.random()*200) +50;
let var4 = Math.floor(Math.random()*200)+50;
let x1 =var3+ Math.round(Math.cos(angle*(Math.PI/180))*var1);
let y1 = var4+ Math.round(Math.sin(angle*(Math.PI/180))*var2);
ctx.fillRect(x1,y1, 10, 10);
if (angle == 360)
{
angle = 0;
}
}, 10);
</script>
</body>
</html>
|