使用canvas实现环形进度条
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="pro" width="400" height="300"></canvas>
</body>
</html>
js代码：
第一步：
var c=document.getElementById("pro"),
pro=0,
ctx=c.getContext("2d");
//画灰色的圆
ctx.beginPath();
ctx.arc(200,200,190,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#e3eaf2';
ctx.fill();
效果图如下：
第二步：
function drawCricle(ctx,percent){
//画进度环
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,190,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
ctx.closePath();
ctx.fillStyle='#ff4b88';
ctx.fill();
//画内填充圆
ctx.beginPath();
ctx.arc(200,200,175,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#fff';
ctx.fill();
}
drawCricle(ctx,60);//执行这个函数
效果图如下：
第三步：让它动起来
function animate(){
requestAnimationFrame(function(){
pro=pro+1;
drawCricle(ctx,pro);
if(pro<60){
animate();
}
});
}
如果需加入百分比文字：
//将这段代码加到drawCricle函数里面
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.moveTo(200, 200);
ctx.fillText(process + '%', 200, 200);
效果如下：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="pro" width="400" height="400"></canvas>
<script>
(function(){
var c=document.getElementById("pro"),
pro=0,
ctx=c.getContext("2d"); //画灰色的圆
ctx.beginPath();
ctx.arc(200,200,80,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#f6f6f6';
ctx.fill(); function animate(){
requestAnimationFrame(function(){
pro=pro+1;
drawCricle(ctx,pro);
if(pro<60){
animate();
}
});
} function drawCricle(ctx,percent){
//画进度环
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
ctx.closePath();
ctx.fillStyle='#ff9600';
ctx.fill(); //画内填充圆
ctx.beginPath();
ctx.arc(200,200,75,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#fff';
ctx.fill(); //填充文字
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.moveTo(200, 200);
ctx.fillText(pro + '%', 200, 200);
}
animate();
}())
</script>
</body>
</html>
使用canvas实现环形进度条的更多相关文章
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- canvas绘制环形进度条
<!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...
- canvas 绘制环形进度条
结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
随机推荐
- 检测Linux硬盘IO数据
首先安装sysstat(有些系统会预装): apt install sysstat 然后使用命令: iostat -x -k 2 x选项用于显示和io有关的扩展数据 k某些使用block为单位的字段改 ...
- ASP.Net开发WebAPI跨域访问(CORS)的精简流程
1: Web.config里有一行: <remove name="OPTIONSVerbHandler" /> 这个要删除. 2: nuget安装Microsoft.A ...
- java最全时间类及用法
对于时间类,这篇主要说明各种现实情况下如何取值,怎么定向取值,得到自己想要的时间参数.在java中时间类主要有Date.Calendar,暂时只介绍 java.util.*下的时间类,对于java.s ...
- Vue2.0 探索之路——生命周期和钩子函数
beforecreate :可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些 ...
- mysql更新某个字符串字段的部分内容
如果现在需要Mysql更新字段重部分数据,而不是全部数据,应该采用何种方法呢?下面介绍了两种情况下Mysql更新字段中部分数据的方法,供您参考. Mysql更新字段中部分数据第一种情况: update ...
- Paint the Grid Reloaded ZOJ - 3781 图论变形
Paint the Grid Reloaded Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %lld & %ll ...
- Python实战之用类的静态方法实现登录验证
#!usr/bin/env Python3 # -*-coding:utf-8-*- __author__="William" #define a class,just to le ...
- MVVM -- CallMethodAction 和 InvokeCommandAction
MVVM实践教程 算算,从事Silverlight和WPF的开发也有1年多的时间了,虽然时间不算长,虽然还没有突出的成就,但是感觉也还算一般. 但是,从头至今都没有去认真研究和使用过MVVM,虽然 ...
- WPF DataGrid显格式
Guide to WPF DataGrid formatting using bindings Peter Huber SG, 25 Nov 2013 CPOL 4.83 (13 votes) ...
- SSM框架整合项目 ：投票系统
框架: Spring SpringMVC MyBatis 题目: 投票系统 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastjson 5, aspe ...