流星拖尾版代码注释
<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;//将画布HTML定义的尺寸赋值给变量 w 和 h 以方便后续操作
let num = (m, n) => Math.floor(Math.random() * (n - m + 1) + m); //工具函数：取两个数之间的随机整数
let stars = new Array(500), meteors = new Array(10); //创建两个数组：stars - 星星（500个），meteors - 流星（10个）
let aud = new Audio(); //创建音频
//lrc歌词数组
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;
}
});
//创建 Star 对象：绝大多数数据随机获取
function Star() {
this.x = num(3, w - 3); //初始X坐标
this.y = num(3, h -3); //初始Y坐标
this.r = num(1,3) * .5; //半径：星星大小将是此值的一倍
this.a = num(1, 10) * 0.1; //初始alpha值
this.speedA = 0.01; //alpha变化速度：用于星星闪烁
this.color = 'rgba(153, 204, 255, .6)'; //星星初始颜色
}
//Star 对象专属函数
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);
}
},
};
//根据预设星星数组，将Star对象实例化并存储到数组中（原来声明的数组是空数组）
for(let x = 0; x < stars.length; x++) {
let star = new Star();
stars = star;
}
//根据预设流星数组，随机取 stars 星星的 meteors.length 个做流星并将下标记录到 meterors 数组
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(); //遍历 stars 对象、逐一运行flash函数
for(let x of meteors) stars.drop(); //遍历流星数组并逐一运行drop函数
requestAnimationFrame(render); //递归调用定时器：永动
})();
</script>
逐句讲解，这个帖子真好，可以知道每一句的作用了。黑黑辛苦了{:4_187:} 红影 发表于 2022-8-12 20:35
逐句讲解，这个帖子真好，可以知道每一句的作用了。黑黑辛苦了
希望不太难懂哈 马黑黑 发表于 2022-8-12 20:58
希望不太难懂哈
语句构成看着陌生，但至少知道都是什么含义了{:4_187:} 红影 发表于 2022-8-12 21:38
语句构成看着陌生，但至少知道都是什么含义了
基于对象的JS语句多了一些 马黑黑 发表于 2022-8-12 22:11
基于对象的JS语句多了一些
嗯嗯，这样的语句真的觉得特别陌生。 红影 发表于 2022-8-12 23:14
嗯嗯，这样的语句真的觉得特别陌生。
去使用了，就会慢慢熟悉 真是太感谢老黑了。每条代码都解释得很清楚。这么热的天真是辛苦你了。{:4_190:}{:4_187:} 加林森 发表于 2022-8-13 11:12
真是太感谢老黑了。每条代码都解释得很清楚。这么热的天真是辛苦你了。
有空调，不热的{:5_106:} 马黑黑 发表于 2022-8-13 11:39
有空调，不热的
我没有用空调的。用风扇就行了。 加林森 发表于 2022-8-13 11:47
我没有用空调的。用风扇就行了。
那省电，也不怕能源制裁 马黑黑 发表于 2022-8-13 12:49
那省电，也不怕能源制裁
丫头在用，我就不用了。 马黑黑 发表于 2022-8-12 23:36
去使用了，就会慢慢熟悉
也许吧，不懂基本原理的话，使用了也不一定懂呢。 红影 发表于 2022-8-13 14:42
也许吧，不懂基本原理的话，使用了也不一定懂呢。
也有可能 马黑黑 发表于 2022-8-13 20:38
也有可能
我就经常套用，弄到后来也不懂{:4_173:} 红影 发表于 2022-8-13 23:33
我就经常套用，弄到后来也不懂
简单套用会如此 马黑黑 发表于 2022-8-14 07:46
简单套用会如此
说的就是我这样的，不求甚解{:4_173:} 红影 发表于 2022-8-14 11:26
说的就是我这样的，不求甚解
还是尽可能去消化或部分消化代码 马黑黑 发表于 2022-8-14 11:39
还是尽可能去消化或部分消化代码
嗯，只能一点点来，弄懂一点是一点。 红影 发表于 2022-8-14 12:17
嗯，只能一点点来，弄懂一点是一点。
多少懂点是好的，不是人人能做懂王
页:
[1]
2