新闻中心

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

2025-11-10
浏览次数：次
返回列表

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

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

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

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

首先，我们来看一个典型的使用Canvas实现动画圆形进度条的代码结构。它包含一个HTML Canvas元素用于绘图，一个元素显示百分比文本，以及一些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;
}

J*aScript 动画逻辑 (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 ) 条件会立即满足，从而清除定时器。实际上，它只绘制了一次最终状态。

修改后的 J*aScript 代码

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);
  }
}

注意事项：

火龙果写作 火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

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

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

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

优化后的 J*aScript 代码

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

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


# 实现了  # 黑龙seo优化免费试用  # 西北营销网站建设技术  # 密云区营销型网站建设  # 黔南seo营销售后  # 动态网站建设研究方法  # 整合营销推广哪家较好  # 微商文章推广网站  # 北派seo短视频  # 营销网站推广的  # 西宁智能营销推广  # 设为  # 也会  # 是一种  # 是在  # css  # 如何实现  # 使其  # 两种  # 不需要  # 进度条  # canva  # css样式  # win  # 前端开发  # 前端  # js  # html  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： UC浏览器如何安装插件 UC浏览器添加扩展程序详细教程【进阶】  拼多多购物车商品数量无法修改如何处理 拼多多购物车操作优化方法  解决J*aScript中重复选择项的确认对话框显示问题  Golang如何使用const iota_Go iota常量计数器讲解  Golang如何优化内存分配与垃圾回收_Golang内存管理与GC优化实践  移动端XML文件怎么转换成Excel 手机和平板上的解决方案  曝R星经典之作开发图 设计简陋但信息密集！  在J*a中如何捕获IndexOutOfBoundsException_索引越界异常防护方法说明  b站怎么删除评论_b站评论管理与删除操作  C++ map遍历方法大全_C++ map迭代器使用总结  J*aScriptWebpack优化_J*aScript构建工具实战  html怎么运行外部js文件中的函数_运html外js文件函数法【技巧】  俄罗斯浏览器官网直达链接 俄罗斯浏览器最新在线入口导航  iCloud登录入口网页版 苹果iCloud官网登录  随机参数递归函数的基准调用次数与时间复杂度探究  Python多线程中正确使用sigwait处理SIGALRM信号  百度网盘网页版入口 百度网盘网页版官方登录网址  手机屏幕碎了但能正常使用怎么办 手机外屏碎裂的修复建议  照顾宝贝2小游戏点击立即在线玩  Log4j Console Appender性能瓶颈与高并发优化策略  Lar*el如何生成PDF或Excel文件_Lar*el文档导出工具与使用教程  Flexbox布局实践：实现粘性导航栏与底部固定页脚  漫蛙网页登录入口 漫蛙漫画官方授权网址  c++如何实现单例设计模式_c++线程安全的单例模式写法  如何创建没有密码的Windows本地账户_跳过微软账户登录的技巧【教程】  如何将HTML表格多行数据保存到Google Sheet  如何将HTML表格多行数据保存到Google Sheets  深入理解字体排版：Adobe光学字偶距与CSS字偶距的差异与实现  CSS子选择器：如何区分并样式化嵌套列表的子层级  J*a里如何实现订单支付与库存同步功能_支付库存同步项目开发方法说明  c++中为什么推荐使用using替代typedef_c++现代化类型别名  c++项目目录结构应该如何组织_c++工程化项目结构规范  Win10如何清理注册表垃圾 Win10手动清理无效注册表【技巧】  Go语言中高效处理x-www-form-urlencoded表单数据  正确连接J*aScript到HTML实现可点击图片与自定义事件处理  Node.js CSV 数据处理：基于字段空值条件过滤整条记录的策略  composer的"require-dev"部分是用来做什么的？  深入理解J*a合成构造器：何时以及为何阻止其生成  Win11截图该按哪些键 Win11截屏完整流程解析【教程】  MAC怎么安装Homebrew包管理器_MAC为开发者和高级用户安装命令行工具  Win11怎么查看显卡显存 Win11显示适配器属性及专用视频内存查询  Spring Boot嵌入式服务器与J*a EE：功能支持深度解析  支付宝解绑银行卡步骤_支付宝如何解除绑定银行卡  在命令行怎么运行html项目_命令行运行html项目方法【教程】  Win11怎么开启卓越性能模式 Win11电源选项启用高性能释放硬件潜力【方法】  双系统安装时，如何设置默认启动系统？ msconfig命令了解一下！  c++中的const_cast和reinterpret_cast怎么用_c++四种类型转换  汽水音乐网页版使用入口_汽水音乐电脑版播放指南  J*a最大堆Heapify方法修复：索引计算与边界条件深度解析  poki网页游戏推荐_poki免费游戏平台入口 

上一篇：在Bootstrap 5固定导航栏下方附加悬浮元素的教程
下一篇：J*aScript：每分钟动态比较两个日期变量的实现与优化

搜索