本帖最后由 加林森 于 2022-8-12 23:44 编辑 <br /><br />沧海一声啸 发表于 2022-6-15 21:01
队长客气了，晚上好
好的，大家都不客气了。你也好！
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://s1.ax1x.com/2022/08/12/vY8AAI.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; 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; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
#canv { position: absolute; width: 1024px; height: 350px; left: 0; top: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">Loading ...</span>
<canvas id="canv" width="1024" height="350"></canvas>
<span id="disc"></span>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m);
let stars = new Array(500), meteors = new Array(10);
let aud = new Audio();
let lrcAr = [
['0.06','愿我如星君如月'],
['60.06','歌手 - 七结音'],
['120.06','所属专辑：愿我如星君如月'],
['140.06','谢谢欣赏'],
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=1438607152.mp3';
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');
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function Star() {
this.x = num(3, w - 3);
this.y = num(3, h -3);
this.r = num(1,3) * .5;
this.a = num(1, 10) * 0.1;
this.speedA = 0.01;
this.color = 'rgba(153, 204, 255, .6)';
}
Star.prototype = {
create: function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
},
flash: function() {
this.a +=this.speedA;
if(this.a > 1 || this.a < 0) this.speedA = -this.speedA;
this.color = 'rgba(153, 204, 255, ' + this.a+ ')';
this.create();
},
drop: function() {
this.x += 2;
this.y += 2;
this.a = .45;
if(this.x > w - 3 || this.y > h - 3) {
this.x = num(3, w - 3);
this.y = num(3, h -3);
}
}
};
for(let x = 0; x < stars.length; x++) {
let star = new Star();
stars = star;
}
for(let x = 0; x < meteors.length; x ++) meteors = num(0,stars.length - 1);
(function render() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillRect(0,0,w,h);
ctx.globalCompositeOperation = 'lighter';
for(let x of stars) x.flash();
for(let x of meteors) stars.drop();
requestAnimationFrame(render);
})();
</script>
加林森 发表于 2022-6-15 20:40
老梦晚上好！
你好，老林。你的雪山制图好漂亮哎！
展翅高飞的雄鹰
梦油 发表于 2022-6-15 21:16
你好，老林。你的雪山制图好漂亮哎！
老梦喜欢就好！
上海朝阳 发表于 2022-6-15 21:30
展翅高飞的雄鹰
唱一个没有问题的吧。
加林森 发表于 2022-6-15 20:46
那就好啊。
是的
加林森 发表于 2022-6-15 20:45
就是。有点晕了。
原理完全吃透后就没啥事了
马黑黑 发表于 2022-6-15 21:40
是的
嗯嗯。有时有点反应不过来的。
马黑黑 发表于 2022-6-15 21:40
原理完全吃透后就没啥事了
好的，我一定拿下。他奶奶的。{:4_170:}
加林森 发表于 2022-6-15 21:46
好的，我一定拿下。他奶奶的。
不急慢慢来
加林森 发表于 2022-6-15 21:45
嗯嗯。有时有点反应不过来的。
正常现象的，入门之时常有的情况
马黑黑 发表于 2022-6-15 22:30
不急慢慢来
嗯嗯。
马黑黑 发表于 2022-6-15 22:31
正常现象的，入门之时常有的情况
是的。老黑让我感到很温暖的。谢谢啦！
加林森 发表于 2022-6-15 22:38
是的。老黑让我感到很温暖的。谢谢啦！
{:4_190:}
马黑黑 发表于 2022-6-15 22:39
{:4_191:}你喝这个吧！
加林森 发表于 2022-6-15 20:25
@马黑黑 @樵歌
来咧，好听极了。{:4_190:}
啥都好，只少了空中小姐姐{:4_170:}
加林森 发表于 2022-6-15 21:37
唱一个没有问题的吧。
试试看，高音部分应该能完成
樵歌 发表于 2022-6-16 06:48
来咧，好听极了。
好听你就接着听。
樵歌 发表于 2022-6-16 06:49
啥都好，只少了空中小姐姐
你去抢一个回来就行了。