效果
起因和动机
之前从其他博客哪里搬了一个樱花落叶效果。但是我本人不是很喜欢那个樱花，而且那个樱花效果太密集太大了。很影响阅读体验，可以说是一个负优化。我这个人要求比较高，自然是很不满意这个效果，所以，我把代码稍微的改动了一下，达成了现在的效果。
改动步骤
我当时将JS实装到博客后发现这个樱花的色调和我的博客非常的不符合，毕竟白色和樱色的对冲太明显，所以我当时考虑过替换成白色花瓣，和金色落叶。但是因为白色花瓣实在是太不明显了，当时博客很多白色区块。看上去就和没有装这个JS一样，就没啥意义。
然后自然就选择了金色的落叶，毕竟白色配这种毕竟偏向金色的落叶还是挺好看的。
但是很快就发现了另一个问题，这个落叶….
太T*M的挡视线啦！
于是连夜对JS再加工，将其变为了你们现在看到的样子。将数量和大小降低，从而不是那么的挡视线而是一种装饰效果啦。总体来说这个JS的美观程度还是有的，但是部分博客可能不会太适配这个落叶，我下面也会教大家怎么改。
安装
代码语言：javascript复制var stop, staticx;
var img = new Image();
img.src = "https://img.cdn.nesxc.com/2022/02/202202251325420webp";
function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 20 * this.s / 2;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
cxt.restore()
};
Sakura.prototype.update = function() {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
this.r = getRandom("fnr");
if (Math.random() > 0.4) {
this.x = getRandom("x");
this.y = 0;
this.s = getRandom("s");
this.r = getRandom("r")
} else {
this.x = window.innerWidth;
this.y = getRandom("y");
this.s = getRandom("s");
this.r = getRandom("r")
}
}
};
SakuraList = function() {
this.list = []
};
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura)
};
SakuraList.prototype.update = function() {
for (var i = 0, len = this.list.length; i < len; i ) {
this.list[i].update()
}
};
SakuraList.prototype.draw = function(cxt) {
for (var i = 0, len = this.list.length; i < len; i ) {
this.list[i].draw(cxt)
}
};
SakuraList.prototype.get = function(i) {
return this.list[i]
};
SakuraList.prototype.size = function() {
return this.list.length
};
function getRandom(option) {
var ret, random;
switch (option) {
case "x":
ret = Math.random() * window.innerWidth;
break;
case "y":
ret = Math.random() * window.innerHeight;
break;
case "s":
ret = Math.random();
break;
case "r":
ret = Math.random() * 4;
break;
case "fnx":
random = -0.5 Math.random() * 1;
ret = function(x, y) {
return x 0.5 * random - 1.7
};
break;
case "fny":
random = 1.5 Math.random() * 0.7;
ret = function(x, y) {
return y random
};
break;
case "fnr":
random = Math.random() * 0.03;
ret = function(r) {
return r random
};
break
}
return ret
}
function startSakura() {
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
var canvas = document.createElement("canvas"),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
canvas.setAttribute("id", "canvas_sakura");
document.getElementsByTagName("body")[0].appendChild(canvas);
cxt = canvas.getContext("2d");
var sakuraList = new SakuraList();
for (var i = 0; i < 50; i ) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom("x");
randomY = getRandom("y");
randomR = getRandom("r");
randomS = getRandom("s");
randomFnx = getRandom("fnx");
randomFny = getRandom("fny");
randomFnR = getRandom("fnr");
sakura = new Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
sakuraList.push(sakura)
}
stop = requestAnimationFrame(function() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
stop = requestAnimationFrame(arguments.callee)
})
}
window.onresize = function() {
var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
startSakura()
};
function stopp() {
if (staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false
} else {
startSakura()
}
};将这段代码重整为JS引入博客就行了。
或者直接html代码引入
代码语言：javascript复制<script src="https://cdn.nesxc.com/js/leaves.js"></script>然后就是怎么替换落叶图片。在JS代码的第三行将引入的图片文件替换为你想要的即可。
温馨提示：oops
温馨提示：本文最后更新于2022-02-25 13:39:57，某些文章具有时效性，若有错误或已失效，请在下方留言或联系小N同学。
