canvas实现芝麻信用评分效果

1，我们需要做的是画线。2，循环调用画线实现动画效果。3，将像素设置高调节毛边。

完整代码：

   var zhima_score = getParameterByName('zhima_score');
        var setIter;
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            n = 40,
            rad = Math.PI * 2 / 100;
        canvas.width = 800;
        canvas.height = 800;
        $(function () {
            if (zhima_score && parseInt(zhima_score) > 0) {
                $('.tip2').text(zhima_score);
                writeCircle();
            } else {
                $('.tip2').hide();
                $('.tip1').hide();
                $('.tip3').show();
                $('.sure').text('离开');
            }
            ctx.strokeStyle = "#F0F4F4";
            ctx.lineWidth = '40';
            ctx.beginPath();
            ctx.arc(400, 632, 360, 40 * rad, 110 * rad, false);
            ctx.stroke();

            $('.sure').click(function () {
                identificationFinish();
                myObj.identificationFinish();
            })
        })

        function go() {
            if (n < 98) {
                var grd = ctx.createLinearGradient(0, 180, 160, 160);
                grd.addColorStop(0, '#21C8B3');
                grd.addColorStop(1, '#204E92');
                ctx.strokeStyle = grd;
                ctx.lineWidth = '40';
                ctx.beginPath();
                ctx.arc(400, 632, 360, 40 * rad, n * rad, false);
                ctx.stroke();
                n += 3;
            }
        }

        function writeCircle() {
            setIter = setInterval('go()', 80);
        }