当前位置：首页 > JavaScript

js实现圆形比例

2026-03-16 03:10:24JavaScript

实现圆形比例的方法

在JavaScript中实现圆形比例（如进度条或饼图）可以通过多种方式完成，以下是几种常见的方法：

使用Canvas绘制

通过HTML5的Canvas API可以绘制圆形比例：

js实现圆形比例

const canvas = document.getElementById('progressCanvas');
const ctx = canvas.getContext('2d');
const percent = 75; // 比例值
const radius = 50;
const lineWidth = 10;

// 绘制背景圆
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI*2);
ctx.strokeStyle = '#ddd';
ctx.lineWidth = lineWidth;
ctx.stroke();

// 绘制进度圆
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, radius, -Math.PI/2, (Math.PI*2*percent/100)-Math.PI/2);
ctx.strokeStyle = '#4285f4';
ctx.lineWidth = lineWidth;
ctx.stroke();

使用SVG实现

SVG是另一种实现圆形比例的有效方式：

js实现圆形比例

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute('width', '120');
svg.setAttribute('height', '120');
svg.setAttribute('viewBox', '0 0 120 120');

const circle = document.createElementNS(svgNS, "circle");
circle.setAttribute('cx', '60');
circle.setAttribute('cy', '60');
circle.setAttribute('r', '50');
circle.setAttribute('stroke', '#ddd');
circle.setAttribute('stroke-width', '10');
circle.setAttribute('fill', 'none');

const path = document.createElementNS(svgNS, "path");
const percent = 75;
const circumference = 2 * Math.PI * 50;
const offset = circumference - (percent / 100) * circumference;
path.setAttribute('d', `M60,10 A50,50 0 1 1 60,110 A50,50 0 1 1 60,10`);
path.setAttribute('stroke', '#4285f4');
path.setAttribute('stroke-width', '10');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-dasharray', circumference);
path.setAttribute('stroke-dashoffset', offset);

svg.appendChild(circle);
svg.appendChild(path);
document.body.appendChild(svg);

使用CSS和HTML结合

纯CSS也可以实现圆形比例效果：

<div class="progress-circle" data-progress="75">
  <div class="progress-circle-overlay"></div>
</div>

<style>
.progress-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#4285f4 75%, #ddd 0);
  position: relative;
}
.progress-circle-overlay {
  position: absolute;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}
</style>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库：

Chart.js：适用于数据可视化
D3.js：提供强大的SVG操作能力
ProgressBar.js：专门用于创建进度条

// 使用ProgressBar.js示例
const circle = new ProgressBar.Circle('#container', {
  color: '#4285f4',
  strokeWidth: 10,
  trailColor: '#ddd',
  trailWidth: 10,
  duration: 1500,
  easing: 'easeInOut'
});

circle.animate(0.75);  // 设置比例75%

以上方法各有优缺点，Canvas适合动态绘制，SVG更适合响应式设计，CSS实现简单但功能有限，第三方库功能强大但会增加项目体积。根据具体需求选择最适合的方案。