预览效果
博文历程
说实话，这篇博客能完成，我深感惊喜，因为之前在这篇博文，见到了一种非常好看的动态背景，无奈因原博文的关键代码图片链接失效了(canvas_moving.js)，所以当时无法在自己的网站上实现，尽管我努力尝试通过网上搜寻该博主相关信息，企图通过蛛丝马迹找到一些残留的线索，很遗憾没有找到。
然而我实在是不愿意轻易放弃这个动态背景，在网络上四处查找类似效果的网站或相关教程，但是结果却不尽人意。抱着碰运气的心态，我后面又陆续找了一段时间，但是依旧无果。本以为真是有缘无份，时隔6个月，今天却通过一个之前发现过的博客网站的一个友链找到了：框架師 (mobaijun.com)，这位大佬使用的正是这个背景。oh my god，激动之情溢于言表，有一种柳暗花明的感觉。
于是我立马进入这位大佬的博客里观摩一番，却没有找到相关教程，同时也注意到这位大佬的申明“本站不接受任何的个性化需求的求助类咨询，任何有关个性化需求的求助类问题一律不予回复，诸如“求…资源”等问题”，看来想走捷径是不可能了，只好自己动手了——F12启动！
于是成功发现了博文所缺失的关键部分的样式代码——canva_moving_effect.js
原代码未格式化，这里给出格式化后的canvas_moving.js代码：
(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库实现，实现代码：
<!--动态背景-->
<div id="Dreamland">
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
<script src="/js/canvas_moving.js"></script>在/themes/matery/layout/layout.ejs文件中加入以上代码。
注意：一定要事先查看是否引入jQuery依赖，一定要有！！！
要检查是否引入了jQuery依赖，可以按照以下步骤进行：
查看页面源代码：在浏览器中打开你想要检查的页面，然后右键点击页面上的空白区域，选择“查看页面源代码”或者“检查元素”。在源代码中搜索关键词“jQuery”或者“$”，看看是否有相关的引入语句。
检查页面加载的资源：在浏览器中使用开发者工具（通常通过按下F12键或右键点击页面并选择“检查”来打开）查看页面加载的资源。在网络选项卡中，可以看到页面加载的所有文件，包括JavaScript文件。检查是否有名为“jQuery”的JavaScript文件加载。
查看页面的JavaScript代码：在源代码或者开发者工具中查看页面的JavaScript代码，查找是否有使用“$”或“jQuery”关键字的地方。如果有，那么很可能是引入了jQuery依赖。
查看HTML中的script标签：查看HTML代码中的script标签，看是否有引入jQuery的CDN链接或者本地文件路径。
查看站点配置文件：如果是通过Hexo或者其他静态网站生成器构建的站点，可以查看站点的配置文件，通常在根目录下的_config.yml或者_config.js文件中，查找是否有引入jQuery的配置项。
通过以上方法，你应该能够确定是否在页面中引入了jQuery依赖。
matery.css
在themes/matery/source/css/matery.css最后添加以下代码：
/*动态背景*/
#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进行部署。
