js 使用canvas绘制方位图并标注刻度-Go服务器开发

你可以使用 JavaScript 和 Canvas 绘制方位图并标注刻度。下面是一个简单的示例代码，演示了如何使用 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>
    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;

    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制背景圆
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // 标注刻度
    for (var i = 0; i <= 360; i += 30) {
      var angle = i * Math.PI / 180;
      var x1 = centerX + (radius - 10) * Math.sin(angle);
      var y1 = centerY - (radius - 10) * Math.cos(angle);
      var x2 = centerX + radius * Math.sin(angle);
      var y2 = centerY - radius * Math.cos(angle);

      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();

      // 添加刻度标签
      ctx.font = "12px Arial";
      ctx.fillText(i.toString(), x2, y2);
    }
  </script>
</body>
</html>

以上代码创建了一个大小为400x400的方位图，绘制了一个背景圆，并在圆上标注了每隔30度的刻度。你可以根据需要自定义样式和添加更多功能。

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