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

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

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

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

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/1999/xhtml" >

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




"bg">

 

 

"txt">

 

 

 

 

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