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類，判斷數值，選擇不一樣的圖片。繁瑣！