vue使用canvas绘制360°方向盘

vue使用canvas绘制360°方向盘

<template>
  <div class="main">
    <div class="huahu">
      <canvas id="myCanvas" width="800" height="800"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {};
  },
  mounted() {
    var list = [{}];
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "15px sans-serif";
    ctx.fillStyle = "green";
    ctx.translate(c.width / 2, c.height / 2);
    var radius = 300; //半径
    for (var n = 0; n < 36; n++) {
      var theta = ((n - 9) * (Math.PI * 2)) / 36; //每个文本旋转的角度
      var x = radius * Math.cos(theta); //x点坐标
      var y = radius * Math.sin(theta); //y点坐标
      ctx.fillText(n * 10, x, y);
    }
    ctx.restore();
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  position: relative;
  .huahu {
    width: 800px;
    height: 800px;
    border: 1px solid green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-500px, 400px);
  }
}
</style>