详解利用canvas实现环形进度条的方法


Posted in HTML / CSS onJune 12, 2019

前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法。

效果图

详解利用canvas实现环形进度条的方法

DOM中,首先定义canvas画板元素:

<canvas id="canvas" width="500" height="500" style="background:#F7F7F7;">
    <p>you browser not support canvas!</p>
  </canvas>

对于不支持canvas的浏览器则会显示:you browser not support canvas!

接下来是js编写:

定义canvas.js并在页面引入

var canvas = document.getElementById('canvas'), //获取canvas元素
  context = canvas.getContext('2d'), //获取画图环境,指明为2d
  centerX = canvas.width / 2, //Canvas中心点x轴坐标
  centerY = canvas.height / 2, //Canvas中心点y轴坐标
  rad = Math.PI * 2 / 100, //将360度分成100份,那么每一份就是rad度
  speed = 0.1; //加载的快慢就靠它了

//绘制蓝色外圈
function blueCircle(n) {
  context.save();
  context.beginPath();
  context.strokeStyle = "#49f";
  context.lineWidth = 12;
  context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
  context.stroke();
  context.restore();
}

//绘制白色外圈
function whiteCircle() {
  context.save();
  context.beginPath();
  context.strokeStyle = "#A5DEF1";
  context.lineWidth = 12;
  context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
  context.stroke();
  context.closePath();
  context.restore();
}

//百分比文字绘制
function text(n) {
  context.save();
  context.fillStyle = "#F47C7C";
  context.font = "40px Arial";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText(n.toFixed(0) + "%", centerX, centerY);
  context.restore();
}

//动画循环
(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);

  whiteCircle();
  text(speed);
  blueCircle(speed);

  if (speed > 100) speed = 0;
  speed += 0.1;
}());
window.requestAnimationFrame(drawFrame, canvas);

每行代码的注释标注非常清楚,如果还有不理解的可以去看canvas基础,应该就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 #HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 #HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 #HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 #HTML / CSS
html通过canvas转成base64的方法
Jul 18 #HTML / CSS
You might like
php获取数组中重复数据的两种方法
2013/06/28 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
高效使用Python字典的清单
2018/04/04 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python实现数字的格式化输出
2020/08/01 Python
python中sys模块是做什么用的
2020/08/16 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
进修护士自我鉴定
2013/10/14 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL