本文记录了利用html5的新特性，实现动态环形进度条，不依赖jquery等其他任何插件。
以下为详细代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<canvas id="myCanvas" width="96px" height="96px"></canvas>
</body>
<script type="text/javascript">
//画圆方法
function drawArc(canvas,begin,end,color)
{
canvas.beginPath();
canvas.lineWidth = 6;
canvas.fillStyle = "#ffffff";
canvas.strokeStyle = color;
canvas.arc(48, 48, 40, begin,end);
canvas.fill();
canvas.stroke();
canvas.closePath();
}
//添加文字方法
function drawWord(canvas,text){
canvas.font = 'bold 20px arial';
canvas.fillStyle = 'red';
canvas.fillText(text, 30,53);
}
//每100毫秒画一次，300毫秒完成
function darwPro(id,rate){
//获取画布对象
var canvasID = document.getElementById("myCanvas");
var canvas = canvasID.getContext("2d");
//先画背景
drawArc(canvas,-0.5*Math.PI,1.5*Math.PI,"#EDEDED");
//setInterval()函数至少执行一次(当rate为零时直接返回)
if(rate == 0){
return;
}
//为了体现动态图使用分段画图的策略
var begin = -0.5*Math.PI;//起始角度
var end = 2*Math.PI*rate-0.5*Math.PI;//结束角度
var add = 2*Math.PI*rate/10;//分段的增量
//分10次完成每次间隔50毫秒
var sid = setInterval(function(){
if(begin >= end){
clearInterval(sid);
return;//此处必须return；因为即使clearInterval，函数仍然会执行一次导致比例不准确
}
drawArc(canvas,begin, begin + add,"red");
//下次起始位置置为上次结束的位置
begin = begin + add;
}, 50);
//显示百分比的文字
drawWord(canvas,rate*100 + "%");
}
darwPro("myCanvas",0.4);
</script>
</html>
文章写的比较简单，仅仅供个人学习记录！
相关推荐
使用html5的canvas插件，配合css3就可以在页面上画出漂亮的环形进度条。
使用css3来实现环形进度条，只传入百分比中的数字即可展示环形状态，可以根据具体需求进行代码修改
HTML5 环形进度条显示百分比 运用CSS3技术实现，环形的加载动画，十分的漂亮有个性哦。
最近公司项目中要用到这种类似环形进度条的效果，初始就从0开始动画到100%结束。动画结果始终会停留在100%上，并不会到因为数据的关系停留在一半。 如图 代码如下 demo.html <!doctype html> <html lang=...
之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图： 代码非常...
昨下午睡着了，晚上打开...canvas环形进度条</title> <style> body{ background-color:#000; text-align: center; } .canvas1{ margin-top: 100px; display: inline-block; background-color: #FF
HTML5 canvas 实现 有底坐大风车动画
HTML实现电池电量图标动态变化
对于常用的环形进度条，网络上大多都是使用DIV，canvas 本人研究了这几种实现，最终采用SVG实现。 DIV环形进度条有毛边，而且无法多环嵌套。 canvas不适用移动段，有毛边。 本案例采用矢量图svg，完美。 10分良心分...
基于html5的canvas制作的环形百分比插件，超简单方法实现
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/html; ...
这是一款基于JavaScript和CSS3的3D环形百分比进度条图表，它可以展示当前数据的百分比情况，与之前分享过的一款HTML5 SVG环形图表应用相比，这款环形图表应用的特点是它的外观呈现3D立体的视觉效果，而且实用性也是...
HTML5 SVG圆形滑块进度条代码是一款通过滑块拖动控制进度条数值，默认支持设置进度条最大数值。
用html+js实现的本地音乐播放器，无需插件即可运行，上传音乐、上一曲、下一曲、暂停、播放、列表循环、单曲循环、随机播放、音乐时长、进度条、进度条点击跳转播放这些基本功能都有，同时还实现了音频可视化，绘制...
--com.zhy.view (环形进度条库) --cwp.moneycharge.dao (业务类) --cwp.moneycharge.model (数据库类) > [基于安卓的个人理财软件的设计与实现--项目心得](http://www.cnblogs.com/linmp4/p/4404347.html "基于...
h5圆形进度条，半环形进度，jQuery圆形统计插件
实例26 随文档动态改变菜单 实例27 启用和禁止菜单命令 实例28 复选菜单命令 第8章 自绘制菜单 实例29 自绘制图标菜单 实例30 visualstudio外观的工具栏 实例31 对话框窗口中的菜单 实例32 弹出位图菜单 第9...