canvas实现芝麻信用评分效果

wlxll 2021-12-20 原文

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