简单封装的一个圆形显示进度条的canvas动画

紧张的10月份过去了.虽然11月份仍然很紧张,不过还是想做点自己想做的事情.
时间不多,我的坦克大战小游戏依然没有时间继续开发.今天用canvas封装了一个圆形进度条显示.

先给个demo链接地址:http://demo.fengyitong.name/circle_total/

代码就不多说了,demo里面可以直接下载了看,代码加上空格数,注释数撑死也才200行....

效果还是不错的.

调用也很简单:

        var cx = new $.CircleAnimate({
            el: doms[i],
            maxValue: 255,    //最大值
            value: 0,        //当前值
            color: "#fff", //外圈底色
            colorAlpha: 0.8, //外圈底色透明度
            outColor: "red", //外圈颜色
            outAlpha: 0.5, //外圈透明度
            outRadius: 0.5, //外圈内半径比
            innerColor: "rgb(255,255,0)", //内圈颜色
            innerAlpha: 0.7, //内圈透明度
            innerScale: 0.5, //内圈半径比例
            speed: 4, //速度.(每次加减值大小.)
            fontColor: '#000' //字体颜色.
        });

接着封装了一个简单的cx.setValue(150); 来实现圆的动画效果.
性能应该还可以,毕竟是canvas原生封装的.
废话不多说了准备睡觉.喜欢的人可以自己下载代码.