王菲 - 流星（拖尾版）

马黑黑 · 发表于 2022-8-12 12:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-8-12 18:09 编辑

Loading ...

马黑黑 · 发表于 2022-8-12 12:57

本帖最后由马黑黑于 2022-8-12 13:44 编辑

参考代码（完整）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>王菲 - 流星</title>
</head>
<body>
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/nightsky.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','王菲 - 流星'],
['1.06','词：周耀辉'],
['2.06','曲：刘以达'],
['26.04','我在海角你却在天边'],
['31.06','两颗注定一起出现的星星'],
['37.05','遥遥呼应却永远走不近'],
['42.09','我和你在暗中互相辉映'],
['48.07','究竟这样是缠绵还是互相毁灭'],
['59.06','已经太久无法承受'],
['65.06','我要逃出你这温柔的宇宙'],
['74.02','化作一颗流星不管飞向那里'],
['79.10','我身后有闪烁的回忆'],
['85.09','我是一颗流星我有一个希望离开你'],
['93.05','我自己美丽地消逝'],
['123.03','我们之间像没有甚幺'],
['128.07','只有一样流着眼泪的银河'],
['134.05','你是牛郎我不敢做织女'],
['139.08','我不要延续凄凉的诗歌'],
['145.09','不想这样的缠绵'],
['150.07','不要互相毁灭'],
['156.06','已经太久无法承受'],
['162.03','是我再次回到凡尘的时候'],
['171.04','化作一颗流星不管飞向哪里'],
['176.10','我身后有闪烁的回忆'],
['182.05','我是一颗流星只有一个希望离开你'],
['190.01','我自己'],
['195.04','美丽化作一颗流星不管飞向哪里'],
['202.06','我身后有你我的回忆'],
['208.02','数不尽的流星只有一个希望'],
['213.10','我寻找'],
['216.02','我自己美丽故事']
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=37993018.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[j][0]) lrcbox.innerHTML = lrcAr[j][1];
}
});
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[x] = star;
}
for(let x = 0; x < meteors.length; x ++) meteors[x] = 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[x].drop();
requestAnimationFrame(render);
})();
</script>
</body>
</html>

复制代码

马黑黑 · 发表于 2022-8-12 12:59

@小辣椒

这个是画布做了尺寸限制和定位，其中，尺寸：宽 100%，高 350px（分别在CSS和HTML设定，两组数值一致，然后修改JS 变量 w 和 h 为画布的尺寸——

let w = canv.width, h = canv.height;

青青子衿 · 发表于 2022-8-12 13:20

这个代码，咱搬回家了。。。小马黑黑友友辛苦了，谢谢您。。。好漂亮的帖子，这也是个小播放器吗？

青青子衿 · 发表于 2022-8-12 13:20

可以加入喜欢的音乐？？？

马黑黑 · 发表于 2022-8-12 13:45

青青子衿发表于 2022-8-12 13:20
这个代码，咱搬回家了。。。小马黑黑友友辛苦了，谢谢您。。。好漂亮的帖子，这也是个小播放器吗？

这组代码刚才有冗余部分，你重新复制一下

马黑黑 · 发表于 2022-8-12 13:45

青青子衿发表于 2022-8-12 13:20
可以加入喜欢的音乐？？？

可以

小辣椒 · 发表于 2022-8-12 19:20

黒黑这个是分享的，和前面那个效果一样吗？

小辣椒 · 发表于 2022-8-12 19:23

感觉这个漂亮一点，流星会飞下来，我界面拉大看很清楚

马黑黑 · 发表于 2022-8-12 19:26

小辣椒发表于 2022-8-12 19:23
感觉这个漂亮一点，流星会飞下来，我界面拉大看很清楚

有木有拖尾，效果不一样的

小辣椒 · 发表于 2022-8-12 19:26

马黑黑发表于 2022-8-12 12:59
@小辣椒

这个是画布做了尺寸限制和定位，其中，尺寸：宽 100%，高 350px（分别在CSS和HTML设定，两组数 ...

黒黑，就是说现在全场景运用这个画面设置不要修改尺寸了，如果要特定地方加效果就要再画布重新设置。。。。

小辣椒 · 发表于 2022-8-12 19:27

谢谢黑黑分享，辛苦了，这个效果我明天做了

马黑黑 · 发表于 2022-8-12 19:28

小辣椒发表于 2022-8-12 19:26
黒黑，就是说现在全场景运用这个画面设置不要修改尺寸了，如果要特定地方加效果就要再画布重新设置。。。 ...

尺寸是根据需要修改的，还有定位。尺寸，就是 width、height，定位，先有 position: absolute，再用 left 和 top 设定物理位置

马黑黑 · 发表于 2022-8-12 19:28

小辣椒发表于 2022-8-12 19:27
谢谢黑黑分享，辛苦了，这个效果我明天做了

嗯，拖尾这个好看一点

小辣椒 · 发表于 2022-8-12 19:31

马黑黑发表于 2022-8-12 19:26
有木有拖尾，效果不一样的

看见了，这个流星会飞下来，明天做这个效果

小辣椒 · 发表于 2022-8-12 19:32

马黑黑发表于 2022-8-12 19:28
尺寸是根据需要修改的，还有定位。尺寸，就是 width、height，定位，先有 position: absolute，再用 left ...

和今天的烟花效果一样的设置？

小辣椒 · 发表于 2022-8-12 19:33

马黑黑发表于 2022-8-12 19:26
有木有拖尾，效果不一样的

我把手机界面拉大，效果看很清楚的

马黑黑 · 发表于 2022-8-12 19:36

小辣椒发表于 2022-8-12 19:31
看见了，这个流星会飞下来，明天做这个效果

我试过 10000 颗星星、100颗流星，在4G内存、继承显卡的win7环境下，都木有卡顿，很流畅。不过渲染这类效果，显卡太差还是有一点流星残留的痕迹。

星星和流星数在这个语句定义：

let stars = new Array(500), meteors = new Array(10);

流星是星星的成员，它的数不能超过星星

马黑黑 · 发表于 2022-8-12 19:37

小辣椒发表于 2022-8-12 19:33
我把手机界面拉大，效果看很清楚的

手机屏幕太小，你可以使用手机上的电脑版

马黑黑 · 发表于 2022-8-12 19:37

小辣椒发表于 2022-8-12 19:32
和今天的烟花效果一样的设置？

一样道理的

[灌水] 王菲 - 流星（拖尾版）

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

心香一瓣

中秋征文

指尖上的流年