js之: canvas圆形进度条 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条DEMO演示</title>

<style>
*{margin:0;padding:0;}
body{text-align:center;background-color:#000;}
#can{
    width: 500px;
    height: 500px;
}
</style>

</head>
<body>
<div id="can"></div>
<script>
(function(){
    function Circle(params){
        this.div = document.getElementById(params.el)
        this.canvas = document.createElement("canvas");
        if (!this.canvas.getContext) { 
          throw new Error("浏览器不支持");
          return
        }
        this.canvas.width = this.div.clientWidth;
        this.canvas.height = this.div.clientHeight;
        this.div.appendChild(this.canvas);
        this.context = this.canvas.getContext('2d');
        this.cd = 0;
        this.radius = this.div.clientHeight/2;
        this.bgline = params.bgline || 10;
        this.bglineColor = params.bglineColor || '#fff';
        this.line = params.line || 15;
        this.lineColor = params.lineColor || "#fff";
        this.color = params.color || "#000";
        this.font = params.font || "40px Arial";
        this.speed = params.speed;
        this.total = params.total;
        this.centerX = this.div.clientWidth/2; 
        this.centerY = this.div.clientHeight/2; 
        this.rad = Math.PI*2/100;
        this.getid=null;
    }
    Circle.prototype = {
        init: function(){
            var _this = this;
            _this.getid = window.requestAnimationFrame(function(){
                _this.init();
            });
            _this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            _this.whiteCircle();
            _this.text(this.cd);
            _this.blueCircle(this.cd);
            this.cd += _this.speed;
            if(_this.cd > _this.total) {
                _this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                _this.whiteCircle();
                _this.text(_this.total);
                _this.blueCircle(_this.total);
                cancelAnimationFrame(_this.getid)
            }
        },
        blueCircle: function(n){
            this.context.save();
            this.context.beginPath(); 
            this.context.scale(0.9,0.9);
            this.context.lineWidth = this.line; 
            this.context.strokeStyle = this.lineColor; 
            this.context.translate(this.centerX*0.1,this.centerY*0.1);
            this.context.arc(this.centerX, this.centerY, this.radius , -Math.PI/2, -Math.PI/2 +n*this.rad, false);
            this.context.stroke(); 
            this.context.closePath(); 
            this.context.restore();
        },
        whiteCircle: function(){
            this.context.save();
            this.context.beginPath();
            this.context.scale(0.9,0.9);
            this.context.translate(this.centerX*0.1,this.centerY*0.1);
            this.context.lineWidth = this.bgline;
            this.context.strokeStyle = this.bglineColor;
            this.context.arc(this.centerX, this.centerY, this.radius , 0, Math.PI*2, false);
            this.context.stroke();
            this.context.closePath();
            this.context.restore();
        },
        text: function(n){
            this.context.save();
            this.context.strokeStyle = this.color;
            this.context.fillStyle = this.color; 
            this.context.font = this.font; 
            this.context.textAlign = 'center'; 
            this.context.fillText(n.toFixed(0)+"%", this.centerX, this.centerY+10);
            this.context.stroke();
            this.context.restore();
        }

    };
    window.circle = function(a,b,c){
        return new Circle(a,b,c);
    };
}())
    var cc = circle({
        el:'can',
        speed: 3,
        total:50,
        bgline:10,
        bglineColor: '#ccc',
        line: 10,
        lineColor: 'red',
        color:'#fff',
        font:'40px Arial'
    });
    cc.init();    
</script>

<div style="text-align:center;clear:both">
</div>

</body>
</html>

 

posted @ 2018-09-19 17:33  二月花开  阅读(797)  评论(0)    收藏  举报