Вдохновение отсюда - https://www.javascripttutorial.net/web-apis/javascript-rotate/
<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('mainfunc()', 100)">
<canvas height='1000' width='1000' id='example'></canvas>
<script>
let angle = 45;
function mainfunc(){
const canvas = document.querySelector('#example');
const width = 150,
height = 20;
const centerX = 500,
centerY = 500;
const ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle * Math.PI / 180);
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(0, 0, width, height);
angle = angle + 1;
ctx.rotate(angle * Math.PI / 180);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, width, height);
angle = angle + 1;
ctx.restore();
}
</script>
</body>
</html>
| 