使用Canvas创建非动画式圆形进度条教程-html教程-PHP中文网

使用Canvas创建非动画式圆形进度条教程

花韻仙語

发布： 2025-11-10 12:51:26

原创

237人浏览过

使用Canvas创建非动画式圆形进度条教程

本教程将指导您如何使用html canvas和javascript创建一个直接显示目标百分比的圆形进度条，而无需动画过渡效果。我们将分析一种常见的动画实现方式，并提供两种修改方案：一种是基于现有动画结构的快速调整，另一种是更纯粹的静态渲染方法，同时也会探讨纯css实现静态进度条的优势。

在前端开发中，圆形进度条是一种常见的UI元素，用于展示加载进度、任务完成度等。通常，这些进度条会伴随动画效果，从0%逐渐增长到目标百分比。然而，在某些场景下，我们可能需要一个静态的进度条，即直接显示最终百分比，不进行任何动画过渡。本文将详细介绍如何利用HTML Canvas实现这种非动画的圆形进度条。

1. 基础结构与动画实现原理

首先，我们来看一个典型的使用Canvas实现动画圆形进度条的代码结构。它包含一个HTML Canvas元素用于绘图，一个<span>元素显示百分比文本，以及一些CSS样式来定位和美化。

HTML 结构 (index.html)

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

登录后复制

CSS 样式 (style.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;
}

登录后复制

JavaScript 动画逻辑 (script.js)

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, // 每秒200帧
      procent = 0,
      oneProcent = 360 / 100, // 1%对应的角度
      targetResult = oneProcent * 64; // 目标百分比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 >= targetResult ) clearInterval(acrInterval);
    }, fps);
  }
}

登录后复制

这段代码通过 setInterval 定时器不断地增加 deegres 变量，并重新绘制进度圆弧，从而实现了从0%到64%的动画效果。

2. 实现非动画式进度条

要实现非动画式进度条，即直接显示最终状态，我们需要修改 arcMove 函数中的逻辑，使其不再通过逐步递增 deegres 来绘制。

方案一：基于现有动画结构的快速调整

最简单的修改方式是，在 arcMove 函数内部，将 deegres 的初始值直接设置为目标角度 targetResult。这样，当 setInterval 第一次执行时，deegres 已经接近或等于 targetResult，在 deegres += 1 之后，if( deegres >= targetResult ) 条件会立即满足，从而清除定时器。实际上，它只绘制了一次最终状态。

修改后的 JavaScript 代码

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

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

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

    // 尽管仍使用 setInterval，但它会立即执行并清除
    var acrInterval = setInterval (function() {
      // 这里的 deegres += 1 会让 deegres 超过 targetResult
      // 从而在第一次迭代后就满足清除条件
      deegres += 1; 
      c.clearRect( 0, 0, can.width, can.height );
      procent = deegres / oneProcent;

      spanProcent.innerHTML = (targetResult / oneProcent).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 >= targetResult ) clearInterval(acrInterval);
    }, fps);
  }
}

登录后复制

注意事项：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

虽然这种方法实现了静态显示，但它仍然启动了一个 setInterval，尽管该定时器会立即被清除。对于追求极致性能和代码简洁性的场景，这并不是最理想的方案。
spanProcent.innerHTML 的更新也需要调整，直接显示 targetResult 对应的百分比，而不是 deegres 计算出的百分比。

方案二：纯静态渲染（推荐）

更优雅和高效的静态进度条实现方式是完全移除 setInterval，让 arcMove 函数只执行一次绘制操作。

优化后的 JavaScript 代码

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 = oneProProcent * targetPercentage; // 目标百分比对应的角度

  c.lineCap = 'round';
  drawStaticArc(targetDegrees, targetPercentage); // 直接调用绘制函数

  function drawStaticArc(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();
  }
}

登录后复制

优点：

代码更简洁，逻辑更清晰。
没有不必要的定时器开销，性能更好。
函数命名更符合其功能（drawStaticArc）。

3. 纯CSS实现静态进度条（作为替代方案）

对于纯粹的静态进度条，如果不需要Canvas提供的复杂绘图能力，CSS可能是更简单、性能更好的选择。例如，可以使用conic-gradient属性来创建圆形进度条。

HTML

<div class="css-progress-wrap">
  <div class="css-progress-bar"></div>
  <span class="css-procent">64%</span>
</div>

登录后复制

CSS

.css-progress-wrap {
  position: relative;
  width: 140px; /* 直径 */
  height: 140px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #b1b1b1; /* 背景圆环颜色 */
}

.css-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 使用 conic-gradient 创建进度条 */
  background: conic-gradient(
    #3949AB 0% 64%, /* 进度颜色和百分比 */
    #b1b1b1 64% 100% /* 背景颜色 */
  );
  /* 模拟圆环效果，中间挖空 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(70px - 10px), #000 0); /* 70px半径 - 10px线宽 */
  mask: radial-gradient(farthest-side, transparent calc(70px - 10px), #000 0);
}

.css-procent {
  position: absolute;
  font-size: 30px;
  color: #3949AB;
  z-index: 1; /* 确保文本在进度条上方 */
}

登录后复制

这种纯CSS方案的优点是代码量少，易于维护，且渲染性能通常优于Canvas，尤其是在不需要复杂交互和动态绘制时。

总结

本文探讨了如何在HTML Canvas中实现非动画式的圆形进度条。我们从一个典型的动画实现开始，逐步优化，提供了两种JavaScript方案：一种是快速调整现有动画逻辑使其立即显示结果，另一种是更推荐的纯静态绘制方法。此外，我们也介绍了使用CSS conic-gradient 实现静态进度条的替代方案。在实际开发中，应根据项目需求（是否需要复杂动画、交互、性能要求等）选择最合适的实现方式。对于简单的静态显示，纯CSS通常是最佳选择；而对于需要复杂动态效果或大量图形操作的场景，Canvas则更具优势。

以上就是使用Canvas创建非动画式圆形进度条教程的详细内容，更多请关注php中文网其它相关文章！