《存在信号》- AcuticNotes（纯音乐欣赏）
本帖最后由 加林森 于 2022-8-24 08:08 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 641px; background: #000 url('https://pic.imgdb.cn/item/6305649b16f2c2beb126e27d.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; left: 0; top: 0; opacity: .45; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 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; z-index: 10; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">存在信号 - AcuticNotes</span>
<span id="disc"></span>
<canvas id="canv" width="1024" height="641"></canvas>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let aud = new Audio();
let circleArr = [];
aud.src = 'https://music.163.com/song/media/outer/url?id=29405904.mp3';
aud.loop = true;
aud.autoplay = true;
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');
function Circle(x,y,r){
this.x = x;
this.y = y;
this.r = r;
this.color = 'rgba(255,255,255, .35)';
this.dx = Math.random() * 12 - 7;
this.dy = Math.random() * 12 - 7;
circleArr.push(this);
}
Circle.prototype.render = function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
ctx.fillStyle = this.color;
ctx.fill();
}
Circle.prototype.update = function(){
this.x += this.dx;
this.y += this.dy;
this.r -= 0.4;
if(this.r < 0){
for (let j = 0; j < circleArr.length; j++) {
if (circleArr === this) {
circleArr.splice(j,1);
};
}
return false;
}
return true;
}
canv.onmousemove = function(event){
new Circle(event.offsetX, event.offsetY, 30);
}
setInterval(function(){
ctx.clearRect(0, 0, w, h)
for (let j = 0; j < circleArr.length; j++) {
circleArr.update() && circleArr.render();
}
}, 20);
</script>
大家早安！{:4_180:} 没法评分。肉眼观察，是画布高度大于帖子父框高度导致。 马黑黑 发表于 2022-8-24 08:05
没法评分。肉眼观察，是画布高度大于帖子父框高度导致。
啊？我看看去。 加林森 发表于 2022-8-24 08:06
啊？我看看去。
鼠标在帖子底下移动，有气泡，故此判断画布高度 马黑黑 发表于 2022-8-24 08:07
鼠标在帖子底下移动，有气泡，故此判断画布高度
我修改回来了。谢谢老黑！ 加林森 发表于 2022-8-24 08:08
我修改回来了。谢谢老黑！
腻害 马黑黑 发表于 2022-8-24 08:09
腻害
谢谢你的提醒哦。 加林森 发表于 2022-8-24 08:11
谢谢你的提醒哦。
现在可以评分了 马黑黑 发表于 2022-8-24 08:13
现在可以评分了
是的。我的一个数字忘记修改了。 加林森 发表于 2022-8-24 08:19
是的。我的一个数字忘记修改了。
正常的。一般难以做到面面俱到 马黑黑 发表于 2022-8-24 08:44
正常的。一般难以做到面面俱到
下次一定注意了。 加林森 发表于 2022-8-24 08:47
下次一定注意了。
总会存在疏漏的 马黑黑 发表于 2022-8-24 08:52
总会存在疏漏的
你就不会的。你养成了习惯，挺好的。 加林森 发表于 2022-8-24 09:03
你就不会的。你养成了习惯，挺好的。
即使如此，常见的错误总会有 马黑黑 发表于 2022-8-24 09:11
即使如此，常见的错误总会有
你应该是很少犯注意的错误。 加林森 发表于 2022-8-24 09:12
你应该是很少犯注意的错误。
总会有的，百密一疏 马黑黑 发表于 2022-8-24 09:20
总会有的，百密一疏
你想胀胖点？{:4_189:} 加林森 发表于 2022-8-24 09:24
你想胀胖点？
这是不可抗拒的 马黑黑 发表于 2022-8-24 09:58
这是不可抗拒的
厉害。
页:
[1]
2