<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid
#d3d3d3;" >
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let angle = 0;
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
let arrayangle = [0,15,25,30,55,75,85,95,100,105];
let t1 = setInterval(function(){
angle++;
ctx.clearRect(0,0,500,500);
for (let sz = 0;sz < 200;sz+=20){
let newsz = 250 - sz;
arrayangle[sz/20]++;
let x = 250+ Math.round(Math.cos(arrayangle[sz/20]*(Math.PI/180))*newsz);
let y = 250+ Math.round(Math.sin(arrayangle[sz/20]*(Math.PI/180))*newsz);
ctx.fillRect(x, y, 10, 10);
}
if (angle == 360) angle = 0;
}, 10);
</script>
</body>
</html>
| 