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

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

<!DOCTYPE html>
<html>
<head>
  <title>方位图</title>
</head>
<body>
  <canvas id="compass" width="400" height="400"></canvas>

  <script>
    // 获取 canvas 元素和上下文
    var canvas = document.getElementById("compass");
    var ctx = canvas.getContext("2d");

    // 设置绘制参数
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = Math.min(centerX, centerY) - 10;

    // 清空画布
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
      ctx.stroke();
    }

    // 绘制刻度
    function drawTick(angle, label) {
      var tickLength = 10;
      var tickWidth = 1;

      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate((angle - 90) * (Math.PI / 180));

      // 绘制刻度线条
      ctx.beginPath();
      ctx.moveTo(radius - tickLength, -tickWidth / 2);
      ctx.lineTo(radius + tickLength, -tickWidth / 2);
      ctx.lineTo(radius + tickLength, tickWidth / 2);
      ctx.lineTo(radius - tickLength, tickWidth / 2);
      ctx.closePath();
      
      // 填充刻度颜色
       if(angle ===0){
        	ctx.fillStyle="#ff0000";
       }
       else if(angle ===90){
           	ctx.fillStyle="#00ff00";
       }
      else{
        	ctx.fillStyle = "#000000";
       }

      ctx.fill();

      // 绘制刻度标签
      ctx.font = "12px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillStyle = "#ffffff";
      ctx.fillText(label, radius + tickLength + 10, 0);

      ctx.restore();
    }

    // 绘制方位图
    function drawCompass() {
        clearCanvas();

        for (var angle = 0; angle <= 360; angle += 30) {
            drawTick(angle, angle.toString() + "°");
        }
    }

    // 调用绘制函数
    drawCompass();
  </script>
</body>
</html>

这段代码会创建一个带有 Canvas 元素的 HTML 页面，并在其中绘制一个圆形方位图，以及刻度线和标注。正上方角度为0°，正右边角度为90°，其他刻度按照每隔30°进行标注。你可以根据需要修改绘制参数、颜色等来适应你的需求。

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