圆形进度条 问题求助

Question

要么准备足够的图片
要么flash要么 根据 （圆就是 到圆心指定距离 的所有 点的集合） 的概念  自己用div模拟

Answer 1

<canvas id='myCanvas' width='500px' height='500px'></canvas>  
<div id="msg" style="position:absolute;left:56px;top:56px;width:100px;line-height:100px;text-align:center;font-size:34px"></div>
  
<script>
    function draw(_end){
        var myCanvas = document.getElementById("myCanvas");  
        var context = myCanvas.getContext("2d");       
        var x = 100,y = 100, r = 50;
        var _start = 15;
        var start = ( _start / 10) * Math.PI ,end = ( _end / 10) * Math.PI ;        
        var color = '';
        if(_end < 27){
          color='#FF0000';  
        }else if(_end >= 27 &&_end < 35 ){
          color='#0000FF'; 
        }else{
          color='#00FF00'; 
        }       
        if(_end!=35){          
          context.clearRect(0,0,500,500);
        }        
        document.getElementById('msg').innerHTML = '<span style="color:'+color+'">'+( _end - _start ) * 5+'%</span>';
        context.lineWidth = 3; 
        context.strokeStyle = color;
        context.beginPath();
        context.arc(x,y,r,start,end);
        context.stroke();
    }
  var end = 15;      
   var clock = setInterval(function(){
      end  = end + 1;
      draw(end);      
      if(parseInt(end)==35){
        clearInterval(clock);
      }
    },100);    
</script>  canvas写了个，略龊，CSS3也可以实现

Answer 2

谢谢，问下多加一个颜色呢，50%-75% 我这边怎么加上没效果function draw(_end){
        var myCanvas = document.getElementById("myCanvas");  
        var context = myCanvas.getContext("2d");       
        var x = 100,y = 100, r = 50;
        var _start = 15;
        var start = ( _start / 10) * Math.PI ,end = ( _end / 10) * Math.PI ;        
        var color = '';
        //将角度来求进度
        var process = parseInt( 100 / 20 * (_end - _start))
        if(process>=0&&process<25){
          color='#FF0000';  
        }else if(process >= 25 &&process < 50 ){
          color='#FFF000'; 
        }else if(process >= 50 &&process < 75 ){
          color='#0000FF'; 
        }else if(process >= 75 &&process < 100 ){
          color='#00FFFF'; 
        }else{
          color='#00FF00'; 
        }       
        if(process!=100){          
          context.clearRect(0,0,500,500);
        }        
        document.getElementById('msg').innerHTML = '<span style="color:'+color+'">' + process + '%</span>';
        context.lineWidth = 3; 
        context.strokeStyle = color;
        context.beginPath();
        context.arc(x,y,r,start,end);
        context.stroke();
    }
把draw方法改下，直接把角度转换成进度，然后判断进度就行了。