html5制作loading图

最新推荐文章于 2023-12-22 10:06:15 发布

iteye_11116

最新推荐文章于 2023-12-22 10:06:15 发布

阅读量349

点赞数

分类专栏： html css js 文章标签： canvas html5

本文链接：https://blog.csdn.net/iteye_11116/article/details/82603335

版权

js 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

css

25 篇文章 0 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<canvas id = "canvas"></canvas>
<script>
var Loading = function (canvas, options) {
    this.canvas = document.getElementById(canvas);
    this.options = options;
};
Loading.prototype = {
    constructor: Loading,
    show: function () {
        var canvas = this.canvas,
        begin = this.options.begin,
        old = this.options.old,
        lineWidth = this.options.lineWidth,
        canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},
        ctx = canvas.getContext("2d"),
        color = this.options.color,
        num = this.options.num,
        angle = 0,
        lineCap = this.options.lineCap,
        CONST_PI = Math.PI * (360 / num) / 180;
        window.timer = setInterval(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < num; i += 1) {
                ctx.beginPath();
                ctx.strokeStyle = color[num - 1 - i];
                ctx.lineWidth = lineWidth;
                ctx.lineCap= lineCap;
                ctx.moveTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * begin, canvasCenter.y + Math.sin(CONST_PI * i + angle) * begin);
                ctx.lineTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * old, canvasCenter.y + Math.sin(CONST_PI * i + angle) * old);
                ctx.stroke();
                ctx.closePath();
            }
            angle += CONST_PI;
        },100);
    },
    hide: function () {
        clearInterval(window.timer);
    }
};
(function () {
    var options = {
        num : 8,
        begin: 20,
        old: 40,
        lineWidth: 10,
        lineCap: "round",
        color: ["rgb(0, 0, 0)", "rgb(20, 20, 20)","rgb(40, 40, 40)", "rgb(60, 60, 60)","rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"]
    };
    var loading = new Loading("canvas", options);
    loading.show();
}());
</script>
</body>
</html>

iteye_11116

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5制作loading图

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;&lt;
复制链接

扫一扫