html5环形百分比插件

【HTML5】

下载

新闻

文章

html5环形百分比插件

/* 作者：太阳光
    * 1、生成指定值的百分比
    * 2、指定大小、颜色（外环色，字体色，内环色）、外环宽
    * 3、回调函数
    * 4、设置读取属性接口
    * */
    function Annulus(obj){
        "use strict";
        var o = {
            obj:null,//canvas对象
            width:200,//圆环宽|高度
            init:0,//初始百分比(动画即时百分比)
            per:0,//最终百分比
            fun:function(){},//回调函数
            time:100,//动画间隔时间
            ringWidth:20,//外圆环宽
            ringColor:"#FF007F",//外圆环颜色
            bottomColour:"#DDDDDD",//外圆环底颜色
            font:"30px Arial",//字体大小和字体
            fontColor:"#000000",//字体颜色
            insideColor:"#FFFFFF",//内环形颜色
            update : function(){
                function fill(radii,angle,endAngle,color,mover){
                    ct.beginPath();
                    mover && ct.moveTo(radius,radius);
                    ct.arc(radius,radius,radii,Math.PI/180*angle,Math.PI/180*endAngle,false);
                    ct.fillStyle = color;
                    ct.closePath();
                    ct.fill();
                }
                var _this = this,ct = _this.obj.getContext('2d'),radius = _this.width/2;
                ct.clearRect(0,0,_this.width,_this.width);
                fill(radius,0,360,_this.bottomColour);
                fill(radius,-90,parseInt(_this.init)/100*360-90,_this.ringColor,true);
                fill(radius-_this.ringWidth,0,360,_this.insideColor);
                ct.beginPath();
                ct.font = _this.font;
                ct.fillStyle = _this.fontColor;
                ct.textAlign = "left";
                var transX = (_this.width - ct.measureText(_this.init + "%").width)/2;
                var transY = (_this.width - _this.font.match(/\d+/)[0])/2;
                ct.translate(transX,transY);
                ct.fillText(_this.init + "%",0,30);
                ct.translate(-transX,-transY);
                _this.fun.apply(_this,arguments);
                _this.init++ < _this.per && setTimeout(function(){_this.update()},_this.time);
                _this.init = Math.min(_this.init,_this.per);
            },
            get : function(name){return this[name]},
            set : function(obj) {
                for (var k in obj)this[k] = obj[k];
                this.obj.width = this.obj.height = this.width;
                this.update();
                return this;
            }
        };
        o.set(obj);
        return o;
    }

var ann,oTxt;
    window.onload=function(){
        if(!window.applicationCache){
            alert("请使用支持HTML5浏览器测试！");
            return;
        }
        oTxt = document.getElementById("result");
        ann = new Annulus({obj:document.getElementById('c1'),per:20,
            fun:function(){
                oTxt.innerHTML = this.init > 79
                    ? "web技术总监" : this.init > 56
                    ? "高级前端工程师" : this.init > 29
                    ? "web前端工程师" : "web菜鸟";
            }
        });
        setTimeout(function(){
            new Annulus({obj:document.getElementById('c2'),per:50});//随时可增加
        },4000)
    };
    function fun1(){
        ann.set({per:80});
    }
    function fun2(){
        alert("init:"+ann.get("init")+" per:"+ann.get("per"));//如果仍在动画中init值才是所见即所得
    }
    function fun3(){
        ann.set({ringColor:'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6),fontColor:'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)});
    }
    function fun4(){
        alert("ringColor:"+ann.get("ringColor")+" fontColor:"+ann.get("fontColor"));
    }
    function fun5(){
        ann.set({init:0});//初始化原始值即可
    }
    function fun6(){
        ann.set({time:50});//即修改定时器
    }
    function fun7(){
        ann.set({width:300,ringWidth:40,font:"40px Microsoft YaHei"});
    }
    function fun8(){
        ann.set({width:200,ringWidth:20,font:"30px Arial"});
    }

点击查看例子