js 使用canvas绘制方位图并标注刻度，刻度显示和标识都朝外，正上方角度为0°，正右边角度为90°，依次顺时针-Go服务器开发

下面是一个使用 JavaScript 和 Canvas 绘制方位图并标注刻度的简单示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>方位图</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="compass" width="400" height="400"></canvas>

    <script>
      const canvas = document.getElementById('compass');
      const context = canvas.getContext('2d');
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(centerX, centerY) - 20;

      // 绘制方位图外圆
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, Math.PI * 2);
      context.strokeStyle = 'black';
      context.lineWidth = 2;
      context.stroke();

      // 标注刻度和角度
      for (let angleDeg = 0; angleDeg < 360; angleDeg += 30) {
        const angleRad = (angleDeg - 90) * (Math.PI / 180);
        const x1 = centerX + Math.cos(angleRad) * radius;
        const y1 = centerY + Math.sin(angleRad) * radius;

        const x2 = centerX + Math.cos(angleRad) * (radius - 10);
        const y2 = centerY + Math.sin(angleRad) * (radius - 10);

        // 绘制刻度线
        context.beginPath();
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.strokeStyle = 'black';
        context.lineWidth = 1;
        context.stroke();

        // 显示角度
        context.font = '12px Arial';
        context.textAlign = 'center';
        context.fillText(angleDeg.toString() + '°', x2, y2);
      }
    </script>
  </body>
</html>

这段代码将在一个400x400的Canvas上绘制一个方位图，并在外圆上标注刻度和角度，刻度显示和标识都朝外，正上方为0°，正右边为90°，依次顺时针。你可以根据需要进行进一步的样式调整和功能扩展。

内容由零声教学AI助手提供，问题来源于学员提问