JavaScript Canvas：实现即时显示而非动画的圆形进度条-html教程-PHP中文网

JavaScript Canvas：实现即时显示而非动画的圆形进度条

DDD

发布： 2025-11-09 09:14:16

原创

172人浏览过

JavaScript Canvas：实现即时显示而非动画的圆形进度条

本教程将指导您如何修改基于javascript canvas的圆形进度条，使其能够直接显示目标百分比，而非通过动画逐步增长。我们将分析现有动画机制，并提供优化方案，实现进度条内容的即时渲染，以满足非动画显示的需求，从而提升用户体验并简化代码逻辑。

背景：动画圆形进度条的工作原理

在Web开发中，使用HTML5 Canvas绘制圆形进度条是一种常见需求。通常，为了展示进度从0到某个目标值的动态过程，我们会采用定时器（如setInterval）来逐步更新绘制角度，从而创建动画效果。

原始代码示例展示了这种动画机制：

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, // 1%对应的角度
      result = oneProcent * 64; // 目标百分比对应的总角度

  c.lineCap = 'round';
  arcMove(); // 调用动画函数

  function arcMove(){
    var deegres = 0; // 初始角度为0
    var acrInterval = setInterval (function() {
      deegres += 1; // 每次增加1度，实现动画
      c.clearRect( 0, 0, can.width, can.height ); // 清除画布
      procent = deegres / 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';
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
      c.stroke();
      if( deegres >= result ) clearInterval(acrInterval); // 达到目标角度后停止动画
    }, fps);
  }
}

登录后复制

在这段代码中，arcMove 函数内的 setInterval 每隔 fps 毫秒执行一次。每次执行，deegres 变量会递增，并重新绘制进度条。这个递增过程就是动画的来源。当 deegres 达到 result（目标百分比对应的角度）时，定时器被清除，动画停止。

需求：实现即时显示而非动画

有时，我们可能不希望进度条有动画效果，而是要求它在加载时立即显示最终的百分比状态。例如，在页面加载完成后直接显示数据统计结果，无需用户等待动画完成。在这种情况下，上述的动画逻辑就显得多余且可能影响用户体验。

立即学习“Java免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

解决方案：优化Canvas绘制逻辑，去除动画

要实现即时显示，核心思想是移除逐步增加角度的动画机制，直接在初始化时将进度条绘制到最终状态。

优化思路

移除 setInterval: 如果不需要动画，则定时器是完全不必要的。
直接设置最终角度: 将绘制进度条所需的角度变量（deegres）直接设置为目标百分比对应的最终角度（result）。
一次性绘制: 将绘制逻辑封装在一个函数中，并在页面加载完成后直接调用一次，而不是在定时器中重复调用。

优化后的JavaScript代码

我们将对原始的 arcMove 函数进行重构，使其不再依赖 setInterval。

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, // 1%对应的角度
      targetPercentage = 64, // 目标百分比
      targetDegrees = oneProcent * targetPercentage; // 目标百分比对应的总角度

  c.lineCap = 'round'; // 设置线条端点样式为圆形

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

  /**
   * 绘制圆形进度条和百分比文本
   * @param {number} degrees - 进度条应达到的角度
   * @param {number} percentage - 进度条应显示的百分比
   */
  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(); // 绘制路径
  }
}

登录后复制

关键修改点解析

targetDegrees 和 targetPercentage: 我们引入了这两个变量来明确表示最终要显示的度数和百分比。
drawProgressBar 函数: 将所有绘制逻辑封装在这个函数中，它接受 degrees 和 percentage 作为参数。
移除 setInterval: arcMove 函数被替换为直接调用 drawProgressBar(targetDegrees, targetPercentage)。这意味着页面加载后，进度条会立即绘制到 64% 的状态，没有任何动画过程。
clearRect 和 beginPath: 即使是静态绘制，每次绘制前清除画布 (clearRect) 和开始新路径 (beginPath) 仍然是良好的实践，确保绘制结果清晰且不会有意外的叠加。

完整示例代码

以下是实现即时显示圆形进度条的完整HTML、CSS和JavaScript代码。

HTML 结构 (index.html)

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="canvas-wrap">
    <canvas id="canvas" width="300" height="300"></canvas>
    <span id="procent"></span>
  </div>

  <script src="script.js"></script>
</body>
</html>

登录后复制

CSS 样式 (style.css)

:root {
  background: #fff;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: sans-serif;
}

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;
  /* 居中 Canvas 容器 */
  display: flex;
  justify-content: center;
  align-items: center;
}

登录后复制

JavaScript 逻辑 (script.js)

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

  // Canvas 中心点坐标
  var posX = can.width / 2,
      posY = can.height / 2,
      oneProcent = 360 / 100, // 1%对应的角度
      targetPercentage = 64, // 目标百分比，可以根据实际需求修改
      targetDegrees = oneProcent * targetPercentage; // 目标百分比对应的总角度

  c.lineCap = 'round'; // 设置线条端点样式为圆形

  // 页面加载后立即绘制进度条到目标状态
  drawProgressBar(targetDegrees, targetPercentage);

  /**
   * 绘制圆形进度条和百分比文本的函数
   * @param {number} degrees - 进度条应达到的角度（0-360）
   * @param {number} percentage - 进度条应显示的百分比（0-100）
   */
  function drawProgressBar(degrees, percentage){
    // 每次绘制前清除整个画布，确保内容刷新
    c.clearRect( 0, 0, can.width, can.height ); 

    // 更新中间的百分比文本
    spanProcent.innerHTML = percentage.toFixed(); 

    // 绘制背景圆环 (灰色)
    c.beginPath(); // 开始绘制一条新路径
    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    // 270度（-90度）作为起始点，绘制一整圈 (360度)
    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'; // 设置线宽
    // 从270度开始，绘制到目标角度
    c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + degrees) );
    c.stroke(); // 描边路径
  }
}

登录后复制

注意事项

何时选择 Canvas 与 CSS 绘制: 对于简单的静态圆形进度条，纯CSS（例如使用conic-gradient或border-radius配合伪元素）可能是更轻量级的选择。然而，如果需要更复杂的图形、交互或动画效果，Canvas提供了更大的灵活性和控制力。本教程专注于Canvas实现。
百分比更新: 如果需要动态更新百分比（例如，用户操作后改变进度），只需再次调用 drawProgressBar(newDegrees, newPercentage) 函数即可。
可维护性: 将绘制逻辑封装在独立的函数中，如 drawProgressBar，可以提高代码的可读性和可维护性，方便在不同场景下复用或修改。

总结

通过本教程，我们学习了如何将一个基于JavaScript Canvas的动画圆形进度条改造为即时显示模式。核心在于移除 setInterval 这样的动画定时器，并直接计算并绘制进度条的最终状态。这种方法简化了代码逻辑，减少了不必要的计算开销，并能够根据实际需求快速响应，立即向用户展示最终的进度结果。

以上就是JavaScript Canvas：实现即时显示而非动画的圆形进度条的详细内容，更多请关注php中文网其它相关文章！