html5 canvas繪制圓形進度實例

html5 canvas繪制圓形進度實例

<canvas id="test" width=200 height=200></canvas>
<script>

var canvas2d = document.getElementById("test").getContext("2d");

var deg = 0;

var test = function(deg){

    var r = deg*Math.PI/180;   //canvas繪制圓形進度

    canvas2d.clearRect(0,0,200,200);   //先清理

    canvas2d.beginPath();  //路徑開始

    //canvas2d.fillStyle = "#fff"; //填充顏色

    canvas2d.strokeStyle = "#dddddd"; //canvas邊框顏色

    canvas2d.lineWidth = 6; //線寬

    canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false); //canvas繪制弧形

    //canvas2d.fill();

    canvas2d.stroke();

    //canvas2d.closePath();

};

//使用定時器讓html5 canvas繪制圓形進度動起來

var t = setInterval(function(){

    deg+=10;

    test(deg);

    if(deg>360){

        clearInterval(t);

    }

    console.log(deg);

},20);



</pre>