【末伏消暑】第八天【名】还不清佳人债--歌手【名】决/李伊曼
<style>
#papa { left: -342px; width: 1280px; top: 150px;background: #000 url('https://pic.imgdb.cn/item/62ffbd5716f2c2beb16b90e7.jpg') no-repeat center/cover; height: 780px; position: relative; z-index: 999; }
#canvas { background: #1f380f; opacity: .75; }
#disc { position: absolute; width: 50px; height: 50px; left: 20px; top: 20px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; z-index: 10; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 80px; top: 20px;font: bold 22px / 40px sans-serif; color: AliceBlue; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="disc"></span>
<span id="lrcbox">还不清佳人债 - 名决/李伊曼</span>
<canvas id="canvas"></canvas>
</div>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1354237934.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback);
}
);
});
function init(elemid) {
let canvas = document.getElementById(elemid),
c = canvas.getContext("2d"),
w = canvas.width = papa.offsetWidth,
h = canvas.height = papa.offsetHeight;
c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);
return {c:c,canvas:canvas};
}
window.onload = function() {
let c = init("canvas").c,
canvas = init("canvas").canvas,
w = canvas.width = papa.offsetWidth,
h = canvas.height = papa.offsetHeight;
mouse = { x: false, y: false },
last_mouse = {};
function dist(p1x, p1y, p2x, p2y) {
return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2));
}
class segment {
constructor(parent, l, a, first) {
this.first = first;
if (first) {
this.pos = {
x: parent.x,
y: parent.y
};
} else {
this.pos = {
x: parent.nextPos.x,
y: parent.nextPos.y
};
}
this.l = l;
this.ang = a;
this.nextPos = {
x: this.pos.x + this.l * Math.cos(this.ang),
y: this.pos.y + this.l * Math.sin(this.ang)
};
}
update(t) {
this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x);
this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI);
this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI);
this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
}
fallback(t) {
this.pos.x = t.x;
this.pos.y = t.y;
this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
}
show() {
c.lineTo(this.nextPos.x, this.nextPos.y);
}
}
class tentacle {
constructor(x, y, l, n, a) {
this.x = x;
this.y = y;
this.l = l;
this.n = n;
this.t = {};
this.rand = Math.random();
this.segments = ;
for (let i = 1; i < this.n; i++) {
this.segments.push(
new segment(this.segments, this.l / this.n, 0, false)
);
}
}
move(last_target, target) {
this.angle = Math.atan2(target.y-this.y,target.x-this.x);
this.dt = dist(last_target.x, last_target.y, target.x, target.y)+5;
this.t = {
x: target.x - 0.8*this.dt*Math.cos(this.angle),
y: target.y - 0.8*this.dt*Math.sin(this.angle)
};
if(this.t.x){
this.segments.update(this.t);
}else{
this.segments.update(target);
}
for (let i = this.n - 2; i >= 0; i--) {
this.segments.update(this.segments.pos);
}
if (
dist(this.x, this.y, target.x, target.y) <=
this.l + dist(last_target.x, last_target.y, target.x, target.y)
) {
this.segments.fallback({ x: this.x, y: this.y });
for (let i = 1; i < this.n; i++) {
this.segments.fallback(this.segments.nextPos);
}
}
}
show(target) {
if (dist(this.x, this.y, target.x, target.y) <= this.l) {
c.globalCompositeOperation = "color-dodge";
c.beginPath();
c.lineTo(this.x, this.y);
for (let i = 0; i < this.n; i++) {
this.segments.show();
}
c.strokeStyle = "hsl("+(this.rand*60+180)+",100%," + (this.rand * 60 + 25) + "%)";
c.lineWidth = this.rand * 2;
c.lineCap="round";
c.lineJoin="round";
c.stroke();
c.globalCompositeOperation = "source-over";
}
}
show2(target) {
c.beginPath();
if (dist(this.x, this.y, target.x, target.y) <= this.l) {
c.arc(this.x, this.y, 2*this.rand+1, 0, 2 * Math.PI);
c.fillStyle = "white";
} else {
c.arc(this.x, this.y, this.rand*2, 0, 2 * Math.PI);
c.fillStyle = "darkcyan";
}
c.fill();
}
}
let maxl = 300,
minl = 50,
n = 30,
numt = 500,
tent = [],
clicked = false,
target = { x: 0, y: 0 },
last_target = {},
t = 0,
q = 10;
for (let i = 0; i < numt; i++) {
tent.push(
new tentacle(
Math.random() * w,
Math.random() * h,
Math.random() * (maxl - minl) + minl,
n,
Math.random() * 2 * Math.PI
)
);
}
function draw() {
if (mouse.x) {
target.errx = mouse.x - target.x;
target.erry = mouse.y - target.y;
} else {
target.errx =
w / 2 +
(h / 2 - q) *
Math.sqrt(2) *
Math.cos(t) /
(Math.pow(Math.sin(t), 2) + 1) -
target.x;
target.erry =
h / 2 +
(h / 2 - q) *
Math.sqrt(2) *
Math.cos(t) *
Math.sin(t) /
(Math.pow(Math.sin(t), 2) + 1) -
target.y;
}
target.x += target.errx / 10;
target.y += target.erry / 10;
t += 0.01;
c.beginPath();
c.arc(target.x, target.y, dist(last_target.x, last_target.y, target.x, target.y)+5, 0, 2 * Math.PI);
c.fillStyle = "hsl(210,100%,80%)";
c.fill();
for (i = 0; i < numt; i++) {
tent.move(last_target, target);
tent.show2(target);
}
for (i = 0; i < numt; i++) {
tent.show(target);
}
last_target.x = target.x;
last_target.y = target.y;
}
canvas.addEventListener(
"mousemove",
function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.offsetX;
mouse.y = e.offsetY;
},
false
);
canvas.addEventListener("mouseleave", function(e) {
mouse.x = false;
mouse.y = false;
});
canvas.addEventListener(
"mousedown",
function(e) {
clicked = true;
},
false
);
canvas.addEventListener(
"mouseup",
function(e) {
clicked = false;
},
false
);
function loop() {
window.requestAnimFrame(loop);
c.clearRect(0, 0, w, h);
draw();
}
loop();
setInterval(loop, 1000 / 60);
}
</script>
<br><br><br><br><br><br><br><br><br><br>
还不清佳人债 - 歌曲
歌手：【名】决/李伊曼
黄花深似海
春光不负少年来
将军出了塞外
还不清佳人债
合：
黄花深似海
春光不负少年来
将军出了塞外
还不清佳人债
天凉好过秋
西风吹弯村头柳
十里相思如旧
愿陪君柳下走
决：
君否记得那年
将亭中的容颜
君否记得离别之前
柳下许的誓言
谁能无情无爱
枉下一笔情债
我的将军远在边塞
战火为他掩盖
曼：
问君何时在归
漫天相思在飞
一路漂泊一路追
一曲相思已成灰
掠过漫天黄沙
佳人眼已哭花
可我为何还不见他
只见老树昏鸦
合：
黄花深似海
春光不负少年来
将军出了塞外
还不清佳人债
天凉好过秋
西风吹弯村头柳
十里相思如旧
愿陪君柳下走
决：
她苦等了十年
只待将军凯旋
经历多少沧海桑田
从未忘记容颜
他负了整个天下
却没断了牵挂
佳人青丝已成白发
葬送一段佳话
曼：
并非有情有义
就定能不离不弃
我愿舍弃所有【名】利
领悟爱的真谛
爱埋葬了过去
情埋没了回忆
爱越过了情的领域
注定一败涂地
曼：
黄花深似海
春光不负少年来
将军出了塞外
还不清佳人债
天凉好过秋
西风吹弯村头柳
十里相思如旧
愿陪君柳下走
决：
黄花深似海
春光不负少年来
将军出了塞外
还不清佳人债
天凉好过秋
西风吹弯村头柳
十里相思如旧
愿陪君柳下走
蛮好听的一首歌曲{:4_173:} @马黑黑
黑黑我套用，就直接发了，完成任务要紧，有没有错误你帮我看看 小辣椒 发表于 2022-8-23 00:05
@马黑黑
黑黑我套用，就直接发了，完成任务要紧，有没有错误你帮我看看
套用一般不会有啥错误{:4_170:} 挺好听的。第一次听。恭喜任务完成！{:4_199:} 哇，电子蜘蛛呢，亲爱的换个底图也好看的呢{:4_187:} 歌好听，词也好。图图意境与内容不大相干呀{:4_203:} 马黑黑 发表于 2022-8-23 07:08
套用一般不会有啥错误
黒黑，才发现手机欣赏比电脑预览美多了，这个有背景图图隐隐约约出来的，昨天就在想，背景一片黑又看不见图，所以我以为哪里出错误了 加林森 发表于 2022-8-23 08:04
挺好听的。第一次听。恭喜任务完成！
谢谢队长{:4_187:} 红影 发表于 2022-8-23 09:08
哇，电子蜘蛛呢，亲爱的换个底图也好看的呢
亲爱的，这个要手机欣赏，效果不一样的 樵歌 发表于 2022-8-23 10:57
歌好听，词也好。图图意境与内容不大相干呀
樵哥哥歌曲作者名字种有这个名字就可以算完成作业了啊{:4_170:} 小辣椒 发表于 2022-8-23 15:09
谢谢队长
不客气的。 小辣椒 发表于 2022-8-23 15:08
黒黑，才发现手机欣赏比电脑预览美多了，这个有背景图图隐隐约约出来的，昨天就在想，背景一片黑又看不见 ...
电脑看到的一样漂亮的。如果看到一片黑，说明你的显示器可以考虑换了，它应该有一定年限了，再用下去对眼睛不好。
可以考虑改变CSS中 #canv 的 opacity 值，往小里改，透明度就越大，改到自己认为合适即可。 马黑黑 发表于 2022-8-23 17:31
电脑看到的一样漂亮的。如果看到一片黑，说明你的显示器可以考虑换了，它应该有一定年限了，再用下去对眼 ...
我改过，图片背景出来一点，那个爬爬虫颜色没有现在的明显了 马黑黑 发表于 2022-8-23 17:31
电脑看到的一样漂亮的。如果看到一片黑，说明你的显示器可以考虑换了，它应该有一定年限了，再用下去对眼 ...
大神，没错，这个显示屏我用了10年了，主机才换没多久，但不晓得是不是其他显示器可以换上去，家里迟买的放储藏室里，天凉一点换一下试试 哈哈，那个类生命体一下子就冲出来了{:4_205:} 小辣椒 发表于 2022-8-23 19:24
大神，没错，这个显示屏我用了10年了，主机才换没多久，但不晓得是不是其他显示器可以换上去，家里迟买的 ...
一般的显示器有多种接口，多数情况下是可以替换的 小辣椒 发表于 2022-8-23 19:18
我改过，图片背景出来一点，那个爬爬虫颜色没有现在的明显了
对，所以要取舍 小辣椒 发表于 2022-8-23 15:10
亲爱的，这个要手机欣赏，效果不一样的
我很少手机看论坛{:4_173:}
页:
[1]
2