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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 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
Protoss建筑一览
2020/03/14 星际争霸
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
盛大笔试题
2016/11/05 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
快递业务员岗位职责
2014/01/06 职场文书
光盘行动倡议书
2014/02/02 职场文书
心理健康活动总结
2014/04/30 职场文书
村庄环境整治方案
2014/05/15 职场文书
任命书范本大全
2014/06/06 职场文书
正规欠条模板
2015/07/03 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS