当前位置：首页 > JavaScript

js实现环形

2026-03-14 15:49:30JavaScript

环形进度条的实现

在JavaScript中实现环形进度条可以通过Canvas或SVG技术完成。以下是两种常见方法的详细说明：

Canvas实现方法

使用HTML5 Canvas绘制环形进度条需要计算圆弧的起始和结束角度：

const canvas = document.getElementById('progressCanvas');
const ctx = canvas.getContext('2d');
const progress = 0.75; // 75%进度

function drawRing() {
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 80;
    const startAngle = -Math.PI / 2;
    const endAngle = startAngle + (2 * Math.PI * progress);

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

    // 绘制进度圆环
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.strokeStyle = '#4285F4';
    ctx.lineWidth = 15;
    ctx.lineCap = 'round';
    ctx.stroke();
}

SVG实现方法

使用SVG的stroke-dasharray属性可以更简单地创建环形进度条：

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#eee" stroke-width="10"/>
    <circle cx="100" cy="100" r="90" fill="none" stroke="#4285F4" 
            stroke-width="10" stroke-linecap="round"
            stroke-dasharray="565.48" stroke-dashoffset="141.37"/>
</svg>

计算公式：

周长 = 2 π r = 565.48 (r=90)
dashoffset = 周长 (1 - 进度值) = 565.48 0.25 = 141.37

动画效果实现

为环形进度条添加动画效果可以通过CSS或JavaScript实现：

function animateProgress(targetProgress) {
    let currentProgress = 0;
    const animationInterval = setInterval(() => {
        currentProgress += 0.01;
        if(currentProgress >= targetProgress) {
            clearInterval(animationInterval);
        }
        updateProgress(currentProgress);
    }, 20);
}

function updateProgress(progress) {
    // 更新Canvas或SVG的进度显示
}

响应式设计技巧

确保环形进度条在不同设备上正常显示：

.progress-container {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.progress-container::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

canvas, svg {
    position: absolute;
    width: 100%;
    height: 100%;
}