<!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 counter_1 = 0;
let t1 = setInterval(function(){
++angle;
for (let sz = 20;sz < 200;sz+=20){
let newsz = 250 - sz;
let x = 250+ Math.round(Math.cos(angle*(Math.PI/180))*newsz);
let y = 250+ Math.round(Math.sin(angle*(Math.PI/180))*newsz);
if (counter_1 < 120) ctx.fillStyle = "red";
if (counter_1 > 120 && counter_1 < 240) ctx.fillStyle = "green";
if (counter_1 > 240 && counter_1 < 360) ctx.fillStyle = "blue";
counter_1++;
if (counter_1 == 360) counter_1 = 0;
ctx.fillRect(x, y, 10, 10);
}
if (angle == 360)
{
clearInterval(t1);
angle = 0;
}
}, 10);
</script>
</body>
</html>
| 