Canvas实现环形进度条

Canvas实现环形进度条

直接上代码：

<canvas width="200" height="200" >60%</canvas>
<canvas width="200" height="200" >20%</canvas>
<canvas width="200" height="200" >50%</canvas>

JS:

   window.onload = function() {
       var options = [                                      //存储颜色数组
           {"color1": "#00ff00", "color2": "#db4c3d"},
           {"color1": "#669900", "color2": "#3faeca"},
           {"color1": "#b34d00", "color2": "#4db07c"}
       ];
       var canvas = document.getElementsByTagName("canvas");
       for(var i=0;i<canvas.length;i++) {
           var that = canvas[i];
           var text = that.innerHTML;
           var number=text.substring(0,text.length-1);
           var ctx = that.getContext("2d");

//画最下面灰色的圆
           ctx.clearRect(0, 0, 200, 200);
           ctx.beginPath();
           ctx.moveTo(100,100);
           ctx.arc(100, 100, 100, 0, 2 * Math.PI, false);
           ctx.closePath();
           ctx.fillStyle = "#ccc";
           ctx.fill();


           //画扇形
           ctx.beginPath();
           ctx.moveTo(100, 100);
           ctx.arc(100, 100, 100, 0, 2 * Math.PI * number / 100, false);
           ctx.closePath();
           ctx.fillStyle = options[i].color1;
           ctx.fill();


           //环形内部的填充
           ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 80, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#fff";
            ctx.fill();


           //中间圆
             ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 60, 0, 2 * Math.PI, false);
            ctx.fillStyle = options[i].color2;
            ctx.fill();

           //填充字体
           ctx.font = "30px Arial";
            ctx.fillStyle = '#fff';
            ctx.fillText(text, 70, 110);

       }
}

效果图：

很明显起始角不合适

改进如下：

补充：因为在IE下canvas不兼容，使用插件excanvas.js，，excanvas.js实现了大部分canvas的API，在绘图方面其核心是通过IE的VML去实现的，利用IE支持的VML对象来模拟Canvas的绘图的。但是还成存在以下缺陷：在速度上与chrome、firefox、safari浏览器相距甚远。也尝试过用其他方式解决IE问题；方法2种，

第一种：通过判断<dd>标签的数字大小，分为两种，大于50，小于50；而改变dt的宽高；

<div class="canvas">
    <dl class="every_canvas">
        <dt><img src="2.png" alt=""/></dt>
        <dd>60%</dd>
    </dl>
    <dl class="every_canvas">
        <dt><img src="2.png" alt=""/></dt>
        <dd>30%</dd>
    </dl>
    <dl class="every_canvas">
        <dt><img src="2.png" alt=""/></dt>
        <dd>80%</dd>
    </dl>
</div>


<style>
dl,dt,dd{
        margin:0;padding:0;list-style:none;
    }
   .every_canvas{
       width:110px;height:110px;float:left;background:url('1.png');margin-right:20px;
       position:relative;overflow:hidden;
   }
    .every_canvas dt{
        width:0px;height:0px;position:absolute;left:0;top:0;overflow:hidden;
    }
   .every_canvas dd{
       width:63px;height:63px;position:absolute;left:23px;top:23px;background:url('3.png')
   }
</style>

js:

if (!document.getElementById("canvas").getContext){            //IE浏览器
           $('.every_canvas').each(function(index){            //循环每一个dl
                var that=$(this);
                var text=that.find('dd').text();       
                var number=text.substring(0,text.length-1);     //去掉%
                if(number>50){
                   that.find('dt').css({
                       "height":"110px",
                       "width":100*number/110+"px"
                   })
                }else{
                    that.find('dt').css({
                        "height":100*number/110+"px",
                        "width":100*number/110+"px"
                    })
                }
            })
 }else{

 }

效果图：

   环形太直，，太僵硬

第二种：就是在ps里面，把100%的环形，做10%、20%、30%、40%、50%、60%、70%、80%、90%、出来，js把number分成10类，判断数值，选择不一样的图片。繁琐！