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

你可以使用 JavaScript 中的 Canvas API 来实现绘制方位图并标注刻度，以下是一个简单的示例代码：

// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = 400;
canvas.height = 400;

// 绘制方位图背景
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 150, 0, Math.PI * 2);
ctx.fillStyle = '#ccc';
ctx.fill();

// 绘制刻度
ctx.beginPath();
for (let i = 0; i < 360; i += 10) {
    const angleInRadians = i * Math.PI / 180;
    const x1 = (canvas.width / 2) + Math.cos(angleInRadians) * 130;
    const y1 = (canvas.height / 2) + Math.sin(angleInRadians) * -130;
    const x2 = (canvas.width / 2) + Math.cos(angleInRadians) * 150;
    const y2 = (canvas.height / 2) + Math.sin(angleInRadians) * -150;

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
}
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();

// 添加刻度标签
ctx.font = '12px Arial';
for (let i = 0; i < 360; i += 30) {
    const angleInDegrees = i % 360;
    const angleInRadians = angleInDegrees * Math.PI / 180;
    
    // 计算标签位置坐标
    const labelX = (canvas.width / 2) + Math.cos(angleInRadians) * 165;
    const labelY = (canvas.height / 2) + Math.sin(angleInRadians) * -165;

    // 绘制标签
    ctx.fillText(`${angleInDegrees}°`, labelX, labelY);
}

你可以将上述代码嵌入到 HTML 中的 <script> 标签中，并为画布元素指定一个 ID（例如 id=“myCanvas”），然后在浏览器中运行该 HTML 文件即可看到绘制好的方位图。刻度显示朝外，即逆时针增加角度时刻度向外延伸。

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