"```markdown

使用HTML5绘制一个指南针

HTML5提供了Canvas API，可以用来绘制各种图形，包括指南针。下面是一个简单的示例，演示如何使用HTML5绘制一个指南针。

首先，我们需要在HTML文件中创建一个Canvas元素，用来绘制指南针。

<canvas id=\"compass\" width=\"200\" height=\"200\"></canvas>

接下来，我们使用JavaScript来绘制指南针的各个部分。首先是绘制圆形作为指南针的背景。

const canvas = document.getElementById('compass');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'lightgray';
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();

然后，我们绘制指针。这里我们以箭头形式绘制指针，并添加文本标记方向。

ctx.translate(centerX, centerY);
ctx.rotate(1); // 旋转指针
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(10, 40);
ctx.lineTo(-10, 40);
ctx.closePath();
ctx.fill();
ctx.font = '14px Arial';
ctx.fillText('N', -10, -30);
ctx.fillText('S', -10, 50);
ctx.fillText('W', -40, 20);
ctx.fillText('E', 20, 20);

最后，我们将指针旋转到指定的角度，这里我们假设指针指向北方。

function drawCompass(degrees) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'lightgray';
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.translate(centerX, centerY);
  ctx.rotate((degrees * Math.PI) / 180);
  ctx.fillStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(10, 40);
  ctx.lineTo(-10, 40);
  ctx.closePath();
  ctx.fill();
  ctx.font = '14px Arial';
  ctx.fillText('N', -10, -30);
  ctx.fillText('S', -10, 50);
  ctx.fillText('W', -40, 20);
  ctx.fillText('E', 20, 20);
  ctx.rotate(-(degrees * Math.PI) / 180);
  ctx.translate(-centerX, -centerY);
}

以上就是使用HTML5绘制指南针的简单示例。通过Canvas API，我们可以实现自定义的图形绘制，包括指南针在内的各种形状。