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);