使用HTML5制作loading图

最新推荐文章于 2023-09-29 12:26:44 发布

weixin_30808253

最新推荐文章于 2023-09-29 12:26:44 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/xljzlw/p/3657524.html

版权

昨天发了一篇使用HTML5 canvas写的时钟的文章，今天发一篇关于使用HTML5制作loading图的文章。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</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;
                    console.log(angle)
                },50);
            },
            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>

这是效果图：

这一篇也是没有注释，但这一篇比上一篇更容易理解。后面还会有一些关于HTML5 canvas的文章，都是去年写的。

转载于:https://www.cnblogs.com/xljzlw/p/3657524.html

weixin_30808253

关注

0
点赞
踩
0

收藏

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

昨天发了一篇使用HTML5 canvas写的时钟的文章，今天发一篇关于使用HTML5制作loading图的文章。<!DOCTYPE html><html><head> <title></title></head><body> <canvas id = "canvas...
复制链接

扫一扫