详解利用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 圆角效果
Jul 15 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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
人族 Terran 基本策略
2020/03/14 星际争霸
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python封装对象实现时间效果
2020/04/23 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
运动会广播稿20字
2014/02/18 职场文书
县级文明单位申报材料
2014/05/23 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
人事局接收函
2015/01/31 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2015年暑期见闻
2015/07/14 职场文书
合理化建议书范文
2015/09/14 职场文书