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

    }

//效果图