draw();

​

function draw() {

  var ctx = document.getElementById('canvas').getContext('2d');

  var W = canvas.width = 120;   //设置 Canvas 宽度

  var H = canvas.height = 120;

  var per = 0.8

​

  // 使图形在画布中居中

  ctx.translate(W / 2, H / 2)

  // 绘制文字

  ctx.fillStyle = 'yellow'; 

  ctx.font="60px Arial";

  ctx.textAlign="center";

  ctx.fillText(`${per * 100}`, 0, 20)

​

  // 保存当前画布状态

  ctx.save()

  // 旋转-90度

  ctx.rotate(-90*(Math.PI/180))

  // 圆边的宽度

  var lineWidth = ctx.lineWidth = 10

  // 底圆的颜色

  ctx.strokeStyle = "#ddd"

  // 开始绘制

  ctx.beginPath();

  // 创建圆（中心点x轴，中心点y轴，半径，起始角度，结束角度，顺时针true/逆时针false）

  ctx.arc(0, 0, (W / 2) - lineWidth, 0, 2 * Math.PI)

  // 结束绘制

  ctx.closePath();

  // 在画布上显示绘制好的圆

  ctx.stroke();

​

  ctx.lineCap = "round"

  ctx.strokeStyle = "#41C0E4"

  ctx.beginPath();

  ctx.arc(0, 0, (W / 2) - lineWidth, 0, 2 * Math.PI * per)

  ctx.stroke();

  // 销毁画布状态

  ctx.restore()

}