canvas绘制指南针

好的，下面是用canvas绘制指南针的步骤：

1. 创建一个canvas元素，并获取它的上下文对象。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

2. 设置canvas元素的大小和样式。

canvas.width = 200;
canvas.height = 200;
canvas.style.border = '1px solid #ccc';

3. 绘制指南针的外圆和刻度。

ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2, false);
ctx.stroke();
for (var i = 0; i < 360; i += 30) {
  var angle = i * Math.PI / 180;
  var x1 = Math.cos(angle) * 70 + 100;
  var y1 = Math.sin(angle) * 70 + 100;
  var x2 = Math.cos(angle) * 80 + 100;
  var y2 = Math.sin(angle) * 80 + 100;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

4. 绘制指南针的指针。

ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.moveTo(100, 100);
var angle = 45 * Math.PI / 180;
var x = Math.cos(angle) * 60 + 100;
var y = Math.sin(angle) * 60 + 100;
ctx.lineTo(x, y);
ctx.stroke();

完成了以上步骤，就可以在canvas中绘制一个简单的指南针了。你可以根据需要调整指针的角度和样式，使其更加符合你的需求。