如何在畫布中使用滾輪移動文本

Question

我現在想在輪子內的尖刺上放置文字，我也需要它們與輪子一起旋轉。 這些峰值的數量也可以改變。我無法做到這一點，因為我剛開始使用 html。 我遇到麻煩的部分是如何動態檢測輪子中的尖峰數量。如何將p標簽動態放置在尖峰上，然后隨輪子移動它們？

有人可以幫我嗎？

Answer 1

作為評論中的討論

用純 CSS 發布我的答案

 body { text-align: center; padding: 100px 0 0 0; color: #fff; background: #1d1f20; } .wheel { width:255px; height:255px; margin: 0 auto; position: relative; -webkit-animation: rotation 4s infinite linear; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .wheel span{ position: absolute; } span.fir { top: 45px; left: 122px; } span.sec { top: 75px; right: 62px; transform: rotate(45deg); } span.thi { top: 135px; right: 51px; transform: rotate(101deg); } span.frt { top: 190px; right: 92px; transform: rotate(-230deg); } span.fiv { top: 190px; left: 92px; transform: rotate(-136deg); } span.six { top: 135px; left: 51px; transform: rotate(-111deg); } span.svn { top: 75px; left: 62px; transform: rotate(-52deg); }

 <div class="wheel" > <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/car-wheel-2-827505.png"> <span class="fir">hi</span> <span class="sec">hi</span> <span class="thi">hi</span> <span class="frt">hi</span> <span class="fiv">hi</span> <span class="six">hi</span> <span class="svn">hi</span> </div>

您可以更改圖像，然后根據視圖更改值