canvas畫倒計時

//畫倒計時
    function drawProcess(num) {

        var process = num / 600 * 100;

        var text = Math.ceil(num / 10);

        // 一個canvas標籤  
        var canvas = $(".process")[0];
        // 拿到繪圖上下文,目前只支持"2d"  
        var context = canvas.getContext('2d');
        // 將繪圖區域清空,如果是第一次在這個畫布上畫圖,畫布上沒有東西,這步就不需要了  
        context.clearRect(0, 0, 48, 48);

        // ***開始畫一個灰色的圓  
        context.beginPath();
        // 座標移動到圓心  
        context.moveTo(24, 24);
        // 畫圓,圓心是24,24,半徑24,從角度0開始,畫到2PI結束,最後一個參數是方向順時針還是逆時針  
        context.arc(24, 24, 24, 0, Math.PI * 2, false);
        context.closePath();
        // 填充顏色  
        context.fillStyle = '#ddd';
        context.fill();
        // ***灰色的圓畫完  

        // 畫進度  
        context.beginPath();
        // 畫扇形的時候這步很重要,畫筆不在圓心畫出來的不是扇形  
        context.moveTo(24, 24);


        // 跟上面的圓唯一的區別在這裏,不畫滿圓,畫個扇形  
//      context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false);
        context.arc(24, 24, 24, -Math.PI * 1 / 2, -(Math.PI * 2 * process / 100) + (Math.PI * 3 / 2), true);
        context.closePath();
        context.fillStyle = '#00bb00';
        context.fill();

        // 畫內部空白  
        context.beginPath();
        context.moveTo(24, 24);
        context.arc(24, 24, 21, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = 'rgba(255,255,255,1)';
        context.fill();

        //在中間寫字  
        context.font = "bold 9pt Arial";
        context.fillStyle = '#213447';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.moveTo(24, 24);
        context.fillText(text, 24, 24);

    }

//效果圖