У меня есть этот вид изображения. Я заставляю его вращаться с этим кодом
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="cnv" width="800px" height = "600px" style="border:solid 1px black"></canvas>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
JS
var cvs,ctx,img,gblTask,gblTask2;
$(document).ready(function(){
// $("p").click(function(){
// $(this).hide();
// });
loop();
});
let circle ={
degrees:0,
draw:function(){
var image = new Image();
image.src= "w.png"
img = image;
img.onload = function(){
ctx.drawImage(img,0,0);
}
},
drawRotated:function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
ctx.save();
ctx.translate(img.width/2,img.height/2);
ctx.rotate((this.degrees+=1)*Math.PI/180);
ctx.drawImage(img,-img.width/2,-img.width/2);
ctx.restore();
if(this.degrees % 45 == 0){
clearInterval(gblTask);
clearInterval(gblTask2);
}
}
}
document.getElementById('cnv').addEventListener('click',function(event){
circle.drawRotated();
gblTask = setInterval(gblTask2=setInterval(function(){circle.drawRotated()},10),100);
});
function loop(){
var canvas = document.getElementById('cnv');
var context = canvas.getContext("2d");
ctx = context;
cvs = canvas;
circle.draw();
}
Теперь я хочу разместить текст на шипах внутри колеса, и мне нужно, чтобы они также вращались вместе с колесом. Также число этих пиков может измениться. Я не могу этого сделать, так как я только начинаю с html. Проблема в том, как динамически определять количество шипов в колесе. И как динамически разместить метки p поверх шипов, а затем перемещать их вместе с колесом?
Может кто-нибудь помочь мне здесь?