canvas实现圆形进度条动画的示例代码


Posted in HTML / CSS onDecember 26, 2017

本文介绍了canvas实现圆形进度条动画,分享给大家,具体如下:

先给大家看看效果图,然后在上代码。

canvas实现圆形进度条动画的示例代码

进度条动画

1. canvas的HTML部分很简单就一个canvas标签

canvas画布的宽高是自身的属性,要在行间样式设置,若是在style设置宽高会使你画的图片变形。

<canvas id="mycanvas" width="100" height="100">
70%
</canvas>

2.画布的js代码

主要思路:效果图中是由三个圆组成的,最外层是一个有黑边的大圆,里面一个改变进度条进度的圆和一个现实百分比的圆。

注意:每画一个圆都要新建一个图层,这样可以单独设置每个图层的样式,之间不相互影响,就像ps的图层一样,一个完整的设计稿都是很多图层组成的。

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function draw(i){
// 大圆框
context.beginPath();
context.lineWidth = 1;
context.arc(50,50,46,0,Math.PI*2);
context.strokeStyle = "grey";
context.stroke();
// 大圆
context.beginPath();
var grd = context.createLinearGradient(15,15,80,80);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"blue");
context.arc(50,50,38,0,Math.PI*2*(i/100));
context.lineWidth = 16;
context.strokeStyle = grd;
context.stroke();
// context.fillStyle = grd;
// context.fill();
// 小圆
context.beginPath();
context.arc(50,50,30,0,Math.PI*2);
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
context.fillStyle = "white";
context.fill();
// 字
context.beginPath();
context.textBaseline = "middle";
context.textAlign = "center";
context.font = "20px Arial";
context.fillStyle = "black";
context.fillText(i+"%",50,50);
}

3. 使用计时器来刷新画布,达到进度条的效果

使用context.clearRect()方法来清空画布的

var i = 0;
var progress = parseInt(canvas.innerHTML);
// console.log(progress);
var timer = setInterval(function(){
if(i >= progress){
clearInterval(timer);
}
context.clearRect(0,0,canvas.width,canvas.height);
draw(i);
i++;
},50);

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

HTML / CSS 相关文章推荐
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 #HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 #HTML / CSS
canvas如何绘制钟表的方法
Dec 13 #HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 #HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 #HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 #HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 #HTML / CSS
You might like
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP Reflection API详解
2015/05/12 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
pytest中文文档之编写断言
2019/09/12 Python
python实现XML解析的方法解析
2019/11/16 Python
parser.add_argument中的action使用
2020/04/20 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
社区活动邀请函范文
2014/01/29 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
岳庙导游词
2015/02/04 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
暑期家教宣传单
2015/07/14 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技