Canvas百分比动画

PROMULGATOR

呦嗬??

重庆市

← 鼠标滑动事件

→ 3d环绕效果图

相关代码

Canvas百分比动画

canvas圆形百分比进度条(原创)

圆形进度条

canvas圆形进度条

canvas 加载中动画

js圆形进度条

css加载+canvas动画

Html

Css

Js

* {
	padding:0;
	margin:0;
}
ul {
	list-style:none;
	overflow:hidden;
	width:1200px;
	margin:0 auto;
}
li {
	width:300px;
	height:300px;
	float:left;
}
body {
	background-color:#333
}

window.onload = function() {
    var canUl = document.getElementById("canvas");
    var li = canUl.getElementsByTagName("li");
    var can = canUl.getElementsByTagName("canvas");
    var pecent = canUl.getElementsByTagName("span");
    var can_arr = [];

function Cavas_pecent(json) {
        this.w = json.w;
        this.h = json.h;
        this.timer = null;
        this.deg = 0;
        this.new_deg = json.new_deg,
            this.obj = json.obj;
        this.color = json.color;
        this.stroke_color = json.stroke_color;
        this.pecent_f = json.pecent_f;
        this.lineWidth = json.lineWidth;
        this.bg_color = json.bg_color;
    }
    Cavas_pecent.prototype.draw = function() {
        var txt = this.deg + "%";
        this.obj.lineCap = "round";
        this.obj.lineWidth = this.lineWidth;
        this.obj.strokeStyle = this.stroke_color;
        this.obj.beginPath();
        this.obj.arc(this.w / 2, this.h / 2, this.w / 2 - this.lineWidth, 0, this.deg / 100 * Math.PI * 2);
        this.obj.fillStyle = "#fff";
        this.obj.font = "25px Arial";
        this.obj.fillText(txt, 150 - this.obj.measureText(txt).width / 2, 150);
        this.obj.stroke();
    }
    Cavas_pecent.prototype.drawBg = function() {
        this.obj.beginPath();
        this.obj.strokeStyle = this.bg_color;
        this.obj.arc(this.w / 2, this.h / 2, this.w / 2 - this.lineWidth, 0, 100 * Math.PI * 2);
        this.obj.stroke();
        this.obj.save();
        return this;
    }
    Cavas_pecent.prototype.go_draw = function() {
        var _this = this;
        _this.timer = setInterval(function() {
            if (_this.deg == _this.pecent_f) {
                clearInterval(_this.timer);
            } else {
                _this.deg++;
                _this.obj.clearRect(0, 0, 300, 300);
                _this.drawBg().draw()
            }
        }, 30)
    }
    for (var i = 0; i < can.length; i++) {
        can_arr[i] = new Cavas_pecent({
            w: li[i].offsetWidth,
            h: li[i].offsetHeight,
            obj: can[i].getContext("2d"),
            color: "#a24565",
            stroke_color: "#a24565",
            pecent_f: parseInt(pecent[i].innerText),
            lineWidth: 5,
            bg_color: "#fff"
        })
        can_arr[i].go_draw();
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

Canvas百分比动画



代码描述：Canvas 百分比加载

1

最新

发表评论全部评论

暂时没有评论！

总督sir0

2017/9/1 15:10:20

锯齿有点严重
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas百分比动画-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号