详解利用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选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
浅析HTML5 Landmark
Sep 11 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Python自定义类的数组排序实现代码
2016/08/28 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
高中的职业生涯规划书
2013/12/28 职场文书
小学生安全保证书
2014/02/01 职场文书
四风存在的原因分析
2014/02/11 职场文书
工程采购员岗位职责
2014/03/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
教师个人年度总结
2015/02/11 职场文书