用Raphael在网页中画圆环进度条（简化版）-阿里云开发者社区

用Raphael在网页中画圆环进度条（简化版）

2017-11-08 1270

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

上篇写了用Raphael画圆环进度条（http://boytnt.blog.51cto.com/966121/1074215），这一篇把它简化一下，只画一条比较粗的弧，优点是简单，缺点是不能做渐变色了。

先上效果图，其实也不差是吧：

然后是代码，基本思想与上一篇完全相同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>圆形进度条(简化版)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<script src="jquery-1.4.2.js"></script>
<script src="raphael-min.js"></script>
<style>
#txt{
width:74px;
height:74px;
line-height:74px;
position:absolute;
margin-top:-74px;
text-align:center;
color:#9e9fa3;
font-size:18px;
font-family:Arial;
}
</style>
<script>
var demo = {
paper: null,
init: function(){
//初始化Raphael画布
this.paper = Raphael("bg", 74, 74);
//把底图先画上去
this.paper.image("progressBg.png", 0, 0, 74, 74);
//进度比例，0到1，在本例中我们画65%
//需要注意，下面的算法不支持画100%，要按99.99%来画
var percent = 0.79,
drawPercent = percent >= 1 ? 0.9999 : percent;
//由于只画一条弧，所以参数简单多了，只用计算弧的起点和终点就好了，与上一篇相比简化了许多
var r = 28.5, PI = Math.PI,
p1 = {
x:37,
y:66
},
p2 = {
x:p1.x + r * Math.sin(2 * PI * (1 - drawPercent)),
y:p1.y - r + r * Math.cos(2 * PI * (1 - drawPercent))
},
path = [
'M', p1.x, ' ', p1.y,
'A', r, ' ', r, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y
].join('');
this.paper.path(path)
//线的粗线为6
.attr({"stroke-width":6, "stroke":"#c32ec3"});
//显示进度文字
$("#txt").text(Math.round(percent * 100) + "%");
}
};
$(function(){
demo.init();
});
</script>
</head>
<body>
<div id="bg"></div>
<div id="txt"></div>
</body>
</html>

PS：Raphael组件是基于MIT协议的，因此闭源商用没有任何问题，感谢作者提供了这么好用的东西。

本文转自 BoyTNT 51CTO博客，原文链接：http://blog.51cto.com/boytnt/1074691，如需转载请自行联系原作者

用Raphael在网页中画圆环进度条（简化版）

热门文章

最新文章

相关电子书

相关实验场景