王菲 - 流星（拖尾版）
本帖最后由 马黑黑 于 2022-8-12 18:09 编辑 <br /><br /><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) 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-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) 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>
</body>
</html>
@小辣椒
这个是画布做了尺寸限制和定位，其中，尺寸：宽 100%，高 350px（分别在CSS和HTML设定，两组数值一致，然后修改JS 变量 w 和 h 为画布的尺寸——
let w = canv.width, h = canv.height; 这个代码，咱搬回家了。。。小马黑黑友友辛苦了，谢谢您。。。好漂亮的帖子，这也是个小播放器吗？ 可以加入喜欢的音乐？？？ 青青子衿 发表于 2022-8-12 13:20
这个代码，咱搬回家了。。。小马黑黑友友辛苦了，谢谢您。。。好漂亮的帖子，这也是个小播放器吗？
这组代码刚才有冗余部分，你重新复制一下 青青子衿 发表于 2022-8-12 13:20
可以加入喜欢的音乐？？？
可以 黒黑这个是分享的，和前面那个效果一样吗？ 感觉这个漂亮一点，流星会飞下来，我界面拉大看很清楚{:4_178:} 小辣椒 发表于 2022-8-12 19:23
感觉这个漂亮一点，流星会飞下来，我界面拉大看很清楚
有木有拖尾，效果不一样的 马黑黑 发表于 2022-8-12 12:59
@小辣椒
这个是画布做了尺寸限制和定位，其中，尺寸：宽 100%，高 350px（分别在CSS和HTML设定，两组数 ...
黒黑，就是说现在全场景运用这个画面设置不要修改尺寸了，如果要特定地方加效果就要再画布重新设置。。。。 谢谢黑黑分享，辛苦了，这个效果我明天做了 小辣椒 发表于 2022-8-12 19:26
黒黑，就是说现在全场景运用这个画面设置不要修改尺寸了，如果要特定地方加效果就要再画布重新设置。。。 ...
尺寸是根据需要修改的，还有定位。尺寸，就是 width、height，定位，先有 position: absolute，再用 left 和 top 设定物理位置 小辣椒 发表于 2022-8-12 19:27
谢谢黑黑分享，辛苦了，这个效果我明天做了
嗯，拖尾这个好看一点 马黑黑 发表于 2022-8-12 19:26
有木有拖尾，效果不一样的
看见了，这个流星会飞下来，明天做这个效果 马黑黑 发表于 2022-8-12 19:28
尺寸是根据需要修改的，还有定位。尺寸，就是 width、height，定位，先有 position: absolute，再用 left ...
和今天的烟花效果一样的设置？ 马黑黑 发表于 2022-8-12 19:26
有木有拖尾，效果不一样的
我把手机界面拉大，效果看很清楚的 小辣椒 发表于 2022-8-12 19:31
看见了，这个流星会飞下来，明天做这个效果
我试过 10000 颗星星、100颗流星，在4G内存、继承显卡的win7环境下，都木有卡顿，很流畅。不过渲染这类效果，显卡太差还是有一点流星残留的痕迹。
星星和流星数在这个语句定义：
let stars = new Array(500), meteors = new Array(10);
流星是星星的成员，它的数不能超过星星 小辣椒 发表于 2022-8-12 19:33
我把手机界面拉大，效果看很清楚的
手机屏幕太小，你可以使用手机上的电脑版 小辣椒 发表于 2022-8-12 19:32
和今天的烟花效果一样的设置？
一样道理的