canvas绘制圆环

<canvas class="process" width="48px" height="48px">15%</canvas>

<script type="text/javascript">
 drawProcess()
function drawProcess() {
    $('canvas.process').each(function() {
        var text = $.trim($(this).text());
        var process = text.substring(0, text.length - 1);
        var canvas = this;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, 48, 48);
        context.beginPath();
        context.moveTo(24, 24);
        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.closePath();
        context.fillStyle = '#e74c3c';
        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.beginPath();
        //context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
        //context.closePath();
        //context.strokeStyle = '#ddd';
        //context.stroke();
        //context.font = "bold 9pt Arial";
        //context.fillStyle = '#e74c3c';
        //context.textAlign = 'center';
        //context.textBaseline = 'middle';
        //context.moveTo(24, 24);
        //context.fillText(text, 24, 24)
    })
}
</script>