html5 canvas转盘中间那个环形

Question

canvas转盘文环形!ui给的效果图如下

公司要的急只能在网上找了改，对canvas一点都不熟~

从网上下下来改的只能做成这样
现在只能做成这样

那块的原始代码如下，
链接描述
不会canvas根本不知道如何下手

是要在在转盘里面画一个环嘛？

Answer 1

先上一下，效果图。

接着是代码。

    <canvas id="canvas" width="300" height="300"></canvas>
    <script type="text/javascript">
    ;(() => {
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext("2d");
      const deg = Math.PI / 180;

      ctx.beginPath();
      ctx.arc(150,150,150, 2 * Math.PI, 0);
      ctx.stroke();
      
      //看这里!我是用来 translate 的代码！！！
      ctx.translate(150, 150);

      const strs = new Array(12).fill("我是乱写的测试文字");
      const angel = 360 / 12 * Math.PI / 180;
      strs.forEach((str) => {
        ctx.fillText(str, 30, 5);
        
        //看这里！！我是用来 rotate 代码！！！
        ctx.rotate(angel);
      });
    })();
    </script>

其实就两样东西来解决这个问题。
首先是旋转 rotate。
写一行字，旋转一下画布，然后在旋转。

第二样东西就是 translate。
因为画布的旋转是以左上角为基点的，这跟我们的预期不一样。
我们的预期是以center为中心，旋转。
所以需要用translate移动一下。

done.