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教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
Canvas系列之滤镜效果
Feb 12 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类
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php统计文章排行示例
2014/03/04 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python找出完数的方法
2018/11/12 Python
Python 面试中 8 个必考问题
2018/11/16 Python
在django模板中实现超链接配置
2019/08/21 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
2014年医生工作总结
2014/11/21 职场文书
房产公证书样本
2015/01/23 职场文书
放假通知格式
2015/04/14 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
golang特有程序结构入门教程
2021/06/02 Python
Python编程super应用场景及示例解析
2021/10/05 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电