L
O
A
D
I
N
G

梦幻背景

背景
hexo
发布日期:   2024-02-12
更新日期:   2026-06-08
文章字数:   2k
阅读时长:   9 分
阅读次数:  

预览效果

dreamland

博文历程

说实话，这篇博客能完成，我深感惊喜，因为之前在这篇博文，见到了一种非常好看的动态背景，无奈因原博文的关键代码图片链接失效了(canvas_moving.js)，所以当时无法在自己的网站上实现，尽管我努力尝试通过网上搜寻该博主相关信息，企图通过蛛丝马迹找到一些残留的线索，很遗憾没有找到。

然而我实在是不愿意轻易放弃这个动态背景，在网络上四处查找类似效果的网站或相关教程，但是结果却不尽人意。抱着碰运气的心态，我后面又陆续找了一段时间，但是依旧无果。本以为真是有缘无份，时隔6个月，今天却通过一个之前发现过的博客网站的一个友链找到了：框架師 (mobaijun.com)，这位大佬使用的正是这个背景。oh my god，激动之情溢于言表，有一种柳暗花明的感觉。

于是我立马进入这位大佬的博客里观摩一番，却没有找到相关教程，同时也注意到这位大佬的申明“本站不接受任何的个性化需求的求助类咨询，任何有关个性化需求的求助类问题一律不予回复，诸如“求…资源”等问题”，看来想走捷径是不可能了，只好自己动手了——F12启动！

于是成功发现了博文所缺失的关键部分的样式代码——canva_moving_effect.js

原代码未格式化，这里给出格式化后的canvas_moving.js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
(function($) {
    var canvas = $("#Dreamland").children("canvas"),
        background = canvas[0],
        foreground1 = canvas[1],
        foreground2 = canvas[2],
        config = {
            circle: {
                amount: 18,
                layer: 3,
                color: [157, 97, 207],
                alpha: 0.3
            },
            line: {
                amount: 12,
                layer: 3,
                color: [255, 255, 255],
                alpha: 0.3
            },
            speed: 0.5,
            angle: 20
        };
    
    if (background.getContext) {
        var bctx = background.getContext("2d"),
            fctx1 = foreground1.getContext("2d"),
            fctx2 = foreground2.getContext("2d"),
            M = window.Math,
            degree = config.angle / 360 * M.PI * 2,
            circles = [],
            lines = [],
            wWidth,
            wHeight,
            timer;

        var setCanvasHeight = function() {
            wWidth = $(window).width();
            wHeight = $(window).height();
            canvas.each(function() {
                this.width = wWidth;
                this.height = wHeight;
            });
        };

        var drawCircle = function(x, y, radius, color, alpha) {
            var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
            gradient.addColorStop(0, "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + alpha + ")");
            gradient.addColorStop(1, "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + (alpha - 0.1) + ")");
            fctx1.beginPath();
            fctx1.arc(x, y, radius, 0, M.PI * 2, true);
            fctx1.fillStyle = gradient;
            fctx1.fill();
        };

        var drawLine = function(x, y, width, color, alpha) {
            var endX = x + M.sin(degree) * width,
                endY = y - M.cos(degree) * width,
                gradient = fctx2.createLinearGradient(x, y, endX, endY);
            gradient.addColorStop(0, "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + alpha + ")");
            gradient.addColorStop(1, "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + (alpha - 0.1) + ")");
            fctx2.beginPath();
            fctx2.moveTo(x, y);
            fctx2.lineTo(endX, endY);
            fctx2.lineWidth = 3;
            fctx2.lineCap = "round";
            fctx2.strokeStyle = gradient;
            fctx2.stroke();
        };

        var drawBack = function() {
            bctx.clearRect(0, 0, wWidth, wHeight);
            var gradient = [];
            gradient[0] = bctx.createRadialGradient(wWidth * 0.3, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth * 0.9);
            gradient[0].addColorStop(0, "rgb(118,128,128)");
            gradient[0].addColorStop(1, "transparent");
            bctx.translate(wWidth, 0);
            bctx.scale(-1, 1);
            bctx.beginPath();
            bctx.fillStyle = gradient[0];
            bctx.fillRect(0, 0, wWidth, wHeight);
            gradient[1] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth);
            gradient[1].addColorStop(0, "rgb(0, 150, 240)");
            gradient[1].addColorStop(0.8, "transparent");
            bctx.translate(wWidth, 0);
            bctx.scale(-1, 1);
            bctx.beginPath();
            bctx.fillStyle = gradient[1];
            bctx.fillRect(0, 0, wWidth, wHeight);
            gradient[2] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.5, 0, wWidth * 0.1, wHeight * 0.5, wWidth * 0.5);
            gradient[2].addColorStop(0, "rgb(40, 20, 105)");
            gradient[2].addColorStop(1, "transparent");
            bctx.beginPath();
            bctx.fillStyle = gradient[2];
            bctx.fillRect(0, 0, wWidth, wHeight);
        };

        var animate = function() {
            var sin = M.sin(degree),
                cos = M.cos(degree);
            if (config.circle.amount > 0 && config.circle.layer > 0) {
                fctx1.clearRect(0, 0, wWidth, wHeight);
                for (var i = 0, len = circles.length; i < len; i++) {
                    var item = circles[i],
                        x = item.x,
                        y = item.y,
                        radius = item.radius,
                        speed = item.speed;
                    if (x > wWidth + radius) {
                        x = -radius;
                    } else if (x < -radius) {
                        x = wWidth + radius;
                    } else {
                        x += sin * speed;
                    }
                    if (y > wHeight + radius) {
                        y = -radius;
                    } else if (y < -radius) {
                        y = wHeight + radius;
                    } else {
                        y -= cos * speed;
                    }
                    item.x = x;
                    item.y = y;
                    drawCircle(x, y, radius, item.color, item.alpha);
                }
            }
            if (config.line.amount > 0 && config.line.layer > 0) {
                fctx2.clearRect(0, 0, wWidth, wHeight);
                for (var j = 0, len = lines.length; j < len; j++) {
                    var item = lines[j],
                        x = item.x,
                        y = item.y,
                        width = item.width,
                        speed = item.speed;
                    if (x > wWidth + width * sin) {
                        x = -width * sin;
                    } else if (x < -width * sin) {
                        x = wWidth + width * sin;
                    } else {
                        x += sin * speed;
                    }
                    if (y > wHeight + width * cos) {
                        y = -width * cos;
                    } else if (y < -width * cos) {
                        y = wHeight + width * cos;
                    } else {
                        y -= cos * speed;
                    }
                    item.x = x;
                    item.y = y;
                    drawLine(x, y, width, item.color, item.alpha);
                }
            }
            timer = requestAnimationFrame(animate);
        };

        var createItem = function() {
            circles = [];
            lines = [];
            if (config.circle.amount > 0 && config.circle.layer > 0) {
                for (var i = 0; i < config.circle.amount / config.circle.layer; i++) {
                    for (var j = 0; j < config.circle.layer; j++) {
                        circles.push({
                            x: M.random() * wWidth,
                            y: M.random() * wHeight,
                            radius: M.random() * (20 + j * 5) + (20 + j * 5),
                            color: config.circle.color,
                            alpha: M.random() * 0.2 + (config.circle.alpha - j * 0.1),
                            speed: config.speed * (1 + j * 0.5)
                        });
                    }
                }
            }
            if (config.line.amount > 0 && config.line.layer > 0) {
                for (var m = 0; m < config.line.amount / config.line.layer; m++) {
                    for (var n = 0; n < config.line.layer; n++) {
                        lines.push({
                            x: M.random() * wWidth,
                            y: M.random() * wHeight,
                            width: M.random() * (20 + n * 5) + (20 + n * 5),
                            color: config.line.color,
                            alpha: M.random() * 0.2 + (config.line.alpha - n * 0.1),
                            speed: config.speed * (1 + n * 0.5)
                        });
                    }
                }
            }
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(animate);
            drawBack();
        };

        $(document).ready(function() {
            setCanvasHeight();
            createItem();
        });

        $(window).resize(function() {
            setCanvasHeight();
            createItem();
        });
    }
})(jQuery);

设置步骤

layout.ejs

使用html5的canvas，配合jQuery库实现，实现代码：

1
2
3
4
5
6
7
<!--动态背景-->
<div id="Dreamland">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
</div>
<script src="/js/canvas_moving.js"></script>

在/themes/matery/layout/layout.ejs文件中加入以上代码。

注意：一定要事先查看是否引入jQuery依赖，一定要有！！！

要检查是否引入了jQuery依赖，可以按照以下步骤进行：

  1. 查看页面源代码：在浏览器中打开你想要检查的页面，然后右键点击页面上的空白区域，选择“查看页面源代码”或者“检查元素”。在源代码中搜索关键词“jQuery”或者“$”，看看是否有相关的引入语句。

  2. 检查页面加载的资源：在浏览器中使用开发者工具（通常通过按下F12键或右键点击页面并选择“检查”来打开）查看页面加载的资源。在网络选项卡中，可以看到页面加载的所有文件，包括JavaScript文件。检查是否有名为“jQuery”的JavaScript文件加载。

  3. 查看页面的JavaScript代码：在源代码或者开发者工具中查看页面的JavaScript代码，查找是否有使用“$”或“jQuery”关键字的地方。如果有，那么很可能是引入了jQuery依赖。

  4. 查看HTML中的script标签：查看HTML代码中的script标签，看是否有引入jQuery的CDN链接或者本地文件路径。

  5. 查看站点配置文件：如果是通过Hexo或者其他静态网站生成器构建的站点，可以查看站点的配置文件，通常在根目录下的_config.yml或者_config.js文件中，查找是否有引入jQuery的配置项。

通过以上方法，你应该能够确定是否在页面中引入了jQuery依赖。

matery.css

在themes/matery/source/css/matery.css最后添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*动态背景*/
#Dreamland {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#Dreamland canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

canvas_moving.js

在themes\hexo-theme-matery\source\js下新建canvas_moving.js文件，添加前面的代码

最后执行hexo cl && hexo g && hexo s 一键进行本地查看效果，修改无误后使用hexo d进行部署。

参考博文

文章作者: loyeh
文章链接: https://Lo-Y-eH.github.io/posts/ede0/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 loyeh !
背景
赏
评论
  目录