js实现圆形比例

使用 Canvas 绘制圆形比例

通过 HTML5 Canvas 可以动态绘制圆形比例图。以下是一个简单的实现示例：

function drawCircleProgress(canvasId, percent) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(centerX, centerY) - 10;
  const startAngle = -Math.PI / 2;
  const endAngle = startAngle + (percent / 100) * (Math.PI * 2);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制背景圆
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.strokeStyle = '#eee';
  ctx.lineWidth = 10;
  ctx.stroke();

  // 绘制进度圆
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, startAngle, endAngle);
  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 10;
  ctx.stroke();
}

// 使用示例
drawCircleProgress('myCanvas', 75);

使用 SVG 实现圆形比例

SVG 提供了更简洁的方式来创建圆形比例图：

function createSvgCircleProgress(containerId, percent) {
  const container = document.getElementById(containerId);
  const size = 200;
  const radius = 80;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (percent / 100) * circumference;

  container.innerHTML = `
    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
      <circle cx="${size/2}" cy="${size/2}" r="${radius}"
        stroke="#eee" stroke-width="10" fill="none"/>
      <circle cx="${size/2}" cy="${size/2}" r="${radius}"
        stroke="#3498db" stroke-width="10" fill="none"
        stroke-dasharray="${circumference}"
        stroke-dashoffset="${offset}"
        transform="rotate(-90 ${size/2} ${size/2})"/>
    </svg>
  `;
}

// 使用示例
createSvgCircleProgress('svgContainer', 60);

使用 CSS 和 HTML 实现

纯 CSS 方案可以使用 conic-gradient 或 transform 技术：

<div class="progress-circle" style="--percent: 65;">
  <div class="progress-mask"></div>
</div>

<style>
.progress-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#3498db calc(var(--percent) * 3.6deg), #eee 0deg);
  position: relative;
}

.progress-mask {
  position: absolute;
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
  top: 10%;
  left: 10%;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专业图表库：

• Chart.js：提供圆形饼图和环形图
• D3.js：提供高度可定制的圆形比例图
• ProgressBar.js：专注于进度条显示的库

// 使用 Chart.js 示例
new Chart(document.getElementById('chart'), {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [75, 25],
      backgroundColor: ['#3498db', '#eee']
    }]
  }
});

动画效果实现

为圆形比例添加动画效果可以提升用户体验：

function animateCircleProgress(canvasId, targetPercent, duration) {
  let start = null;
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(centerX, centerY) - 10;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = Math.min((timestamp - start) / duration, 1);
    const currentPercent = progress * targetPercent;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.strokeStyle = '#eee';
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, -Math.PI/2, -Math.PI/2 + (currentPercent/100)*(Math.PI*2));
    ctx.strokeStyle = '#3498db';
    ctx.lineWidth = 10;
    ctx.stroke();

    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  }

  window.requestAnimationFrame(step);
}

// 使用示例
animateCircleProgress('animatedCanvas', 80, 1000);