Canvas环形进度条教程：快速实现百分比显示

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《Canvas环形进度条：快速实现百分比显示教程》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

本教程将指导您如何使用HTML Canvas和JavaScript创建并即时显示一个环形进度条，而无需任何动画过渡。我们将通过调整JavaScript代码中的关键参数，使得进度条在加载时直接显示目标百分比，并提供优化方案以避免不必要的定时器开销，确保高效且直接的视觉反馈。

在Web开发中，进度条是常见的UI元素，用于向用户展示操作的进展。使用HTML Canvas可以创建高度定制化的环形进度条。本教程将重点讲解如何修改一个基于Canvas的动画进度条，使其能够即时显示特定百分比，而不需要从零开始逐步动画到目标值。

1. 准备工作：HTML 结构与 CSS 样式

首先，我们需要一个基本的HTML结构来容纳Canvas元素和显示百分比的文本。同时，使用CSS来美化和定位这些元素。

1.1 HTML 结构

创建一个 div 容器，内部包含一个 canvas 元素和一个 span 元素，用于显示百分比数值。

<div class="canvas-wrap">
  <canvas id="canvas" width="300" height="300"></canvas>
  <span id="procent"></span>
</div>

1.2 CSS 样式

CSS用于将百分比文本居中显示在环形进度条的中央，并设置一些基本样式。

:root {
  background: #fff;
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 50px;
  transform: translate(-50%, -50%);
  color: #3949AB;
}

span#procent::after {
  content: '%';
}

.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  /* 居中显示，可选 */
  margin: 50px auto; 
}

2. JavaScript 核心逻辑：从动画到即时显示

接下来是JavaScript部分，它负责在Canvas上绘制环形进度条。我们将从一个动画版本的代码开始，逐步修改以实现即时显示。

2.1 理解原始动画原理

原始代码通过 setInterval 定时器逐步增加 deegres 变量的值，每次增加1度，从而实现环形进度条从0%到目标百分比的动画效果。

// 原始动画逻辑示例 (简化)
function arcMove(){
  var deegres = 0; // 从0度开始
  var acrInterval = setInterval (function() {
    deegres += 1; // 每次增加1度，产生动画
    // ... 绘制代码 ...
    if( deegres >= result ) clearInterval(acrInterval); // 达到目标后停止
  }, fps);
}

这种方式适用于需要平滑过渡的场景，但如果我们的需求是直接显示最终状态，这种动画过程就显得多余了。

2.2 方案一：通过修改初始值实现即时显示（基于原答案）

为了实现即时显示，一个直接的修改方法是让 deegres 变量在 arcMove 函数被调用时，就直接初始化为目标角度 result。这样，当 setInterval 第一次执行时，deegres 已经接近或等于 result，循环条件 deegres >= result 很快就会满足，从而立即清除定时器。

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
      c = can.getContext('2d');

  var posX = can.width / 2,
      posY = can.height / 2,
      fps = 1000 / 200, // 定时器频率，在此方案中实际作用不大
      procent = 0,
      oneProcent = 360 / 100,
      targetPercentage = 64, // 目标百分比
      result = oneProcent * targetPercentage; // 目标角度

  c.lineCap = 'round';
  arcMove();

  function arcMove(){
    // 关键修改：将 deegres 直接初始化为目标角度 result
    var deegres = result; 

    // 尽管目标是即时显示，这里仍保留了 setInterval 的结构
    // 实际效果是：第一次执行时 deegres >= result，然后 clearInterval 被调用
    var acrInterval = setInterval (function() {
      // 在第一次迭代中，deegres 已经是 result，然后会执行 deegres += 1
      // 此时 deegres 变为 result + 1，依然满足 deegres >= result 的条件
      // 所以定时器会在第一次绘制后立即清除
      deegres += 1; 
      c.clearRect( 0, 0, can.width, can.height );

      // 根据目标百分比计算实际显示的百分比
      // 注意：这里计算的 procent 仍会基于 deegres，由于 deegres = result，所以显示的是 targetPercentage
      procent = result / oneProcent; 

      spanProcent.innerHTML = procent.toFixed();

      // 绘制背景圆弧 (灰色)
      c.beginPath();
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
      c.strokeStyle = '#b1b1b1';
      c.lineWidth = '10';
      c.stroke();

      // 绘制前景进度圆弧 (蓝色)
      c.beginPath();
      c.strokeStyle = '#3949AB';
      c.lineWidth = '10';
      // 使用 deegres 来绘制，由于 deegres 初始就是 result，所以直接绘制到目标角度
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
      c.stroke();

      // 达到目标角度后清除定时器
      if( deegres >= result ) clearInterval(acrInterval);
    }, fps);
  }
}

这种方法虽然实现了即时显示，但仍然使用了 setInterval，即使它只执行了一次。对于完全不需要动画的场景，这并不是最优雅或最高效的解决方案。

2.3 方案二：彻底移除动画，实现纯粹的即时绘制（优化推荐）

如果明确不需要任何动画效果，最直接且最高效的方法是完全移除 setInterval。我们只需要在 arcMove 函数中直接执行一次绘制操作，将进度条绘制到最终的目标百分比。

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
      c = can.getContext('2d');

  var posX = can.width / 2,
      posY = can.height / 2,
      oneProcent = 360 / 100,
      targetPercentage = 64, // 设定目标百分比
      targetDegrees = oneProcent * targetPercentage; // 计算目标角度

  c.lineCap = 'round';

  // 直接调用绘制函数，传入目标角度和百分比
  drawProgressBar(targetDegrees, targetPercentage);

  // 封装绘制逻辑为一个独立函数
  function drawProgressBar(degrees, percentage){
    c.clearRect( 0, 0, can.width, can.height ); // 清除画布

    spanProcent.innerHTML = percentage.toFixed(); // 显示百分比

    // 绘制背景圆弧 (灰色)
    c.beginPath();
    c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
    c.strokeStyle = '#b1b1b1';
    c.lineWidth = '10';
    c.stroke();

    // 绘制前景进度圆弧 (蓝色)
    c.beginPath();
    c.strokeStyle = '#3949AB';
    c.lineWidth = '10';
    c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + degrees) );
    c.stroke();
  }
}

这个优化后的方案更加简洁明了，避免了不必要的定时器开销，是实现无动画即时显示进度条的最佳实践。

3. 完整代码示例

将HTML、CSS和优化后的JavaScript代码整合在一起，即可得到一个功能完整的无动画即时显示环形进度条。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 即时环形进度条</title>
    <style>
        :root {
            background: #fff;
        }

        span#procent {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 50px;
            transform: translate(-50%, -50%);
            color: #3949AB;
        }

        span#procent::after {
            content: '%';
        }

        .canvas-wrap {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto; /* 居中显示 */
            border: 1px solid #eee; /* 方便观察容器 */
        }
    </style>
</head>
<body>
    <div class="canvas-wrap">
        <canvas id="canvas" width="300" height="300"></canvas>
        <span id="procent"></span>
    </div>

    <script>
        window.onload = function() {
            var can = document.getElementById('canvas'),
                spanProcent = document.getElementById('procent'),
                c = can.getContext('2d');

            var posX = can.width / 2,
                posY = can.height / 2,
                oneProcent = 360 / 100,
                targetPercentage = 64, // 设定目标百分比
                targetDegrees = oneProcent * targetPercentage; // 计算目标角度

            c.lineCap = 'round';

            // 页面加载时直接绘制最终状态
            drawProgressBar(targetDegrees, targetPercentage);

            // 封装绘制逻辑为一个独立函数
            function drawProgressBar(degrees, percentage){
                c.clearRect( 0, 0, can.width, can.height ); // 清除画布

                spanProcent.innerHTML = percentage.toFixed(); // 显示百分比

                // 绘制背景圆弧 (灰色)
                c.beginPath();
                c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
                c.strokeStyle = '#b1b1b1';
                c.lineWidth = '10';
                c.stroke();

                // 绘制前景进度圆弧 (蓝色)
                c.beginPath();
                c.strokeStyle = '#3949AB';
                c.lineWidth = '10';
                c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + degrees) );
                c.stroke();
            }
        }
    </script>
</body>
</html>

4. 注意事项与进阶

• 性能优化: 对于无动画的场景，始终推荐直接绘制而非使用定时器。定时器会引入不必要的开销，即使它只运行一次。
• 动态更新: 如果需要根据用户操作或数据变化来更新进度条，只需再次调用 drawProgressBar(newDegrees, newPercentage) 函数即可。例如，可以创建一个函数来接收新的百分比值，然后重新计算角度并调用 drawProgressBar。

  function updateProgress(newPercentage) {
      if (newPercentage < 0) newPercentage = 0;
      if (newPercentage > 100) newPercentage = 100;
      var newDegrees = oneProcent * newPercentage;
      drawProgressBar(newDegrees, newPercentage);
  }
  // 示例：2秒后更新到80%
  setTimeout(() => updateProgress(80), 2000);

• 替代方案: 对于纯粹的静态进度条（例如加载完成后的状态显示），除了Canvas，也可以考虑使用纯CSS（如 border-radius 和 conic-gradient）来实现，这在某些情况下可能更简单且性能更好。然而，Canvas在需要复杂图形、交互或动态动画时具有更大的灵活性。

5. 总结

通过本教程，您学会了如何使用HTML Canvas和JavaScript创建并即时显示一个环形进度条。关键在于理解动画的原理，并在不需要动画时，通过直接设置目标值并移除定时器来优化代码。这种方法不仅实现了即时显示的需求，也提高了代码的效率和可维护性。在实际开发中，根据具体需求选择合适的实现方案至关重要。

今天关于《Canvas环形进度条教程：快速实现百分比显示》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！