canvas绘制饼图带百分比

const canvas = document.getElementById(target);
const ctx = canvas.getContext('2d');
const startPoint = 1.5 * Math.PI;
if (percent > 0) {
  ctx.fillStyle = '#95B3D7';
  ctx.strokeStyle = '#95B3D7';
  ctx.beginPath();
  ctx.moveTo(80, 80);
  ctx.arc(80, 80, 80, startPoint, startPoint + Math.PI * 2 * percent, false);
  ctx.fill();
  ctx.stroke();
}
const text = ((percent || 0) * 100).toFixed(2) + '%';
const textAngle = (startPoint + Math.PI * percent);
let x = 80;
let y = 80;
if (percent < 1 && percent > 0) {
  x = 80 - Math.cos(textAngle * Math.PI / 2) * 40;
  y = 80 - Math.sin(textAngle * Math.PI / 2) * 40;
  if (percent < 0.75) {
    ctx.textAlign = 'start';
  } else {
    ctx.textAlign = 'end';
  }
} else {
  ctx.textAlign = 'center';
}
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.fillText(text, x, y);
ctx.fill();