canvas画一个半圆曲线仪表盘加上加载动画

以下是使用HTML5 Canvas绘制半圆曲线仪表盘，并添加加载动画的示例代码：

HTML代码：

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

JavaScript代码：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;

// 绘制半圆曲线
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI, false);
context.strokeStyle = "gray";
context.lineWidth = 10;
context.stroke();

// 绘制刻度
var startAngle = Math.PI;
var endAngle = 1.5 * Math.PI;
for (var i = 0; i <= 10; i++) {
  var angle = startAngle + (endAngle - startAngle) / 10 * i;
  var x1 = centerX + (radius - 15) * Math.cos(angle);
  var y1 = centerY + (radius - 15) * Math.sin(angle);
  var x2 = centerX + (radius - 5) * Math.cos(angle);
  var y2 = centerY + (radius - 5) * Math.sin(angle);
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.strokeStyle = "gray";
  context.lineWidth = 2;
  context.stroke();
}

// 绘制指针
var pointerWidth = 5;
var pointerLength = 60;
var pointerAngle = startAngle + (endAngle - startAngle) * 0.75;
var pointerX = centerX + (radius - 35) * Math.cos(pointerAngle);
var pointerY = centerY + (radius - 35) * Math.sin(pointerAngle);
context.beginPath();
context.moveTo(pointerX, pointerY);
context.lineTo(pointerX + pointerLength * Math.cos(pointerAngle), pointerY + pointerLength * Math.sin(pointerAngle));
context.lineWidth = pointerWidth;
context.strokeStyle = "red";
context.stroke();

// 添加加载动画
var progress = 0;
setInterval(function() {
  if (progress < 100) {
    progress++;
  } else {
    progress = 0;
  }
  var angle = startAngle + (endAngle - startAngle) / 100 * progress;
  pointerX = centerX + (radius - 35) * Math.cos(angle);
  pointerY = centerY + (radius - 35) * Math.sin(angle);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI, false);
  context.strokeStyle = "gray";
  context.lineWidth = 10;
  context.stroke();
  for (var i = 0; i <= 10; i++) {
    angle = startAngle + (endAngle - startAngle) / 10 * i;
    x1 = centerX + (radius - 15) * Math.cos(angle);
    y1 = centerY + (radius - 15) * Math.sin(angle);
    x2 = centerX + (radius - 5) * Math.cos(angle);
    y2 = centerY + (radius - 5) * Math.sin(angle);
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.strokeStyle = "gray";
    context.lineWidth = 2;
    context.stroke();
  }
  context.beginPath();
  context.moveTo(pointerX, pointerY);
  context.lineTo(pointerX + pointerLength * Math.cos(angle), pointerY + pointerLength * Math.sin(angle));
  context.lineWidth = pointerWidth;
  context.strokeStyle = "red";
  context.stroke();
}, 50);

在上面的代码中，我们首先使用Canvas的arc()方法绘制了一个半圆曲线仪表盘。然后，我们在仪表盘上绘制了10个刻度，并绘制了一个红色的指针。接下来，我们添加了一个定时器，用于不断更新指针的位置，从而实现加载动画效果。在每次更新时，我们清除画布并重新绘制仪表盘和刻度，并计算出新的指针位置。最后，我们使用Canvas的moveTo()和lineTo()方法绘制新的指针。