Вдохновленный https://processing.org/examples/trianglestrip.html
<!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;
let angleStep = 20;
let outsideRadius = 150;
let insideRadius = 100;
let x = 250;
let y = 250;
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
function radians(degrees)
{
var pi = Math.PI;
return degrees * (pi/180);
}
setInterval(function(){
angle+=5;
let x1 = x + Math.cos(radians(angle)) * outsideRadius;
let y1 = y + Math.sin(radians(angle)) * outsideRadius;
angle += angleStep;
let x2 = x + Math.cos(radians(angle)) * insideRadius;
let y2 = y + Math.sin(radians(angle)) * insideRadius;
angle += angleStep;
ctx.beginPath();
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x1-50, y1-50);
ctx.lineTo(x2-50, y2-50);
ctx.lineTo(x1+50, y1+50);
ctx.lineTo(x2+50, y2+50);
ctx.lineTo(x1-50, y1+50);
ctx.lineTo(x2-50, y2+50);
ctx.lineTo(x1+50, y1-50);
ctx.lineTo(x2+50, y2-50);
ctx.stroke();
if (angle == 360)
{
angle == 360;
}
}, 10);
</script>
</body>
</html>
| 