详解利用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开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 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 文件上传系统手记
2009/10/26 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
2019年.net常见面试问题
2012/02/12 面试题
自主招生自荐书
2013/11/29 职场文书
房屋租赁意向书
2014/04/01 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年度思想工作总结
2014/11/27 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
董事长年会致辞
2015/07/29 职场文书
诚信高考倡议书
2019/06/24 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书