论坛 › 欢乐水吧 › 《满目星河》（纯音乐）- dylanf / MappleZS

加林森 发表于 2022-8-14 11:02

《满目星河》（纯音乐）- dylanf / MappleZS

本帖最后由 加林森 于 2022-8-14 11:38 编辑 <br /><br /><style>
      #papa { left: -214px; width: 1024px; height: 575px; top: 150px; background: gray url('https://pic.imgdb.cn/item/62f8600016f2c2beb10e275f.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: 250px;}
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <span id="lrcbox">Loading ...</span>
      <canvas id="canv" width="1024" height="250"></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(400), meteors = new Array(10);
let aud = new Audio();
let lrcAr = [
               ['00.00','满目星河 - dylanf / MappleZS'],
        ['100.00','所属专辑：满目星河「Star river in your eyes」'],
        ['140.00','谢谢欣赏']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=1930687269.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;
      }
});

for(j = 0; j < stars.length; j ++) {
      let star = document.createElement('span');
      star.className = 'meteor';
      let x1 = num(0, w-5);
      let y1 = num(0, h/4);
      let x2 = x1 + num(50, 100);
      let y2 = y1 + num(20, 50);
      star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`;
      papa.appendChild(star);
      stars = star;
}

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>
<br><br><br><br><br><br><br><br><br>

马黑黑 发表于 2022-8-14 11:20

你这个山的Z轴偏近客户视野，画布应减少高度，不让星星嵌入山体。

加林森 发表于 2022-8-14 11:29

本帖最后由 加林森 于 2022-8-14 11:42 编辑

马黑黑 发表于 2022-8-14 11:20
你这个山的Z轴偏近客户视野，画布应减少高度，不让星星嵌入山体。
是的。我已经减少到250了，现在应该可以了吧。

马黑黑 发表于 2022-8-14 11:38

继续减

加林森 发表于 2022-8-14 11:48

马黑黑 发表于 2022-8-14 11:38
继续减

减为：250了。

马黑黑 发表于 2022-8-14 12:29

加林森 发表于 2022-8-14 11:48
减为：250了。

瞧瞧，250多好{:4_173:}

加林森 发表于 2022-8-14 12:33

马黑黑 发表于 2022-8-14 12:29
瞧瞧，250多好

哈哈，真厉害]。

马黑黑 发表于 2022-8-14 12:42

加林森 发表于 2022-8-14 12:33
哈哈，真厉害]。

一般人我不告诉他

加林森 发表于 2022-8-14 12:44

马黑黑 发表于 2022-8-14 12:42
一般人我不告诉他

谢谢你！{:4_190:}

马黑黑 发表于 2022-8-14 12:48

加林森 发表于 2022-8-14 12:44
谢谢你！

{:5_108:}

加林森 发表于 2022-8-14 12:49

马黑黑 发表于 2022-8-14 12:48


{:5_108:}再次感谢！

马黑黑 发表于 2022-8-14 12:49

加林森 发表于 2022-8-14 12:49
再次感谢！

客气了

加林森 发表于 2022-8-14 12:51

马黑黑 发表于 2022-8-14 12:49
客气了

应该的，学到东西就是自己的了。

加林森 发表于 2022-8-14 14:56

@小辣椒

樵歌 发表于 2022-8-14 16:43

马黑黑 发表于 2022-8-14 11:20
你这个山的Z轴偏近客户视野，画布应减少高度，不让星星嵌入山体。

非常赞同，不要那也罢。

樵歌 发表于 2022-8-14 16:44

不用那山，弄个美女仰望星空如何。{:4_170:}

加林森 发表于 2022-8-14 16:52

樵歌 发表于 2022-8-14 16:44
不用那山，弄个美女仰望星空如何。

每天都想 看美女啊？{:5_158:}

小辣椒 发表于 2022-8-14 17:11

加林森 发表于 2022-8-14 14:56
@小辣椒

来了，队长学习很认真的，这个流星已经做了几次了啊{:4_187:}

小辣椒 发表于 2022-8-14 17:12

一次比一次有进步，队长好厉害了{:4_199:}

马黑黑 发表于 2022-8-14 17:28

樵歌 发表于 2022-8-14 16:43
非常赞同，不要那也罢。

队长改250后好了{:5_106:}

查看完整版本: 《满目星河》（纯音乐）- dylanf / MappleZS