夏日气泡

马黑黑 · 发表于 2022-8-17 06:46

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

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

x

纯音乐 - 夏日气泡

马黑黑 · 发表于 2022-8-17 06:46

代码分享（全）：

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #000 url('/data/attachment/forum/202208/17/064409psi3cekd313bdcwd.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">纯音乐 - 夏日气泡</span>
<span id="disc"></span>
<canvas id="canv" width="1024" height="640"></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=1941590939.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[j] === 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[j].update() && circleArr[j].render();
}
}, 20);
</script>

复制代码

马黑黑 · 发表于 2022-8-17 07:05

本帖最后由马黑黑于 2022-8-17 07:07 编辑

本帖气泡效果由鼠标指针在帖子上移动时触发。

气泡效果实现原理极其简单：

一、创建一个 Circle 对象，就是气泡对象，实例化此对象至少需要三个参数：圆形xy坐标和圆半径。其他参数对象中已声明，也可以在实例化过程中更改这些参数。

二、对象方法有两个：

① render ：负责画圆，标准的画笔画法，按对象提供的参数绘制；同时负责将自身放入数组存储。

② update ：两个作用，其一是，改变对象的圆心坐标和半径；其二是，清除数组中的实例化对象（气泡，实际上是气泡数组元素）。

关于清除气泡数组元素：气泡产生后不断变小，最终消失。变小的过程，半径 r 会小于0，如果是酱紫，则将其数据从数组元素中删掉。

然后，通过 setInterval 定时器，每隔20毫秒清空一次画布，并更新气泡数组内的数据待用。

最后，鼠标指针在画布上移动时，触发气泡对象的实例化工作，定时器则将数据更新并运行 render 对象函数，从而产生气泡在鼠标指针周围产生、扩散、消失的效果。

加林森 · 发表于 2022-8-17 08:26

大漂亮的制作哦。老黑辛苦了。来学习了。

三月的阳光 · 发表于 2022-8-17 11:24

老黑辛苦了。来学习了。

马黑黑 · 发表于 2022-8-17 12:46

三月的阳光发表于 2022-8-17 11:24
老黑辛苦了。来学习了。

马黑黑 · 发表于 2022-8-17 12:46

加林森发表于 2022-8-17 08:26
大漂亮的制作哦。老黑辛苦了。来学习了。

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

马黑黑发表于 2022-8-17 12:46

谢茶！我终于上来了。

马黑黑 · 发表于 2022-8-17 12:50

加林森发表于 2022-8-17 12:49
谢茶！我终于上来了。

电脑正常了木有

加林森 · 发表于 2022-8-17 12:52

马黑黑发表于 2022-8-17 12:50
电脑正常了木有

现在终于正常了。

马黑黑 · 发表于 2022-8-17 12:53

加林森发表于 2022-8-17 12:52
现在终于正常了。

还要观察一阵子的。换了硬盘了么

加林森 · 发表于 2022-8-17 12:59

马黑黑发表于 2022-8-17 12:53
还要观察一阵子的。换了硬盘了么

没有。我原来就有120G的固态硬盘的。

马黑黑 · 发表于 2022-8-17 13:00

加林森发表于 2022-8-17 12:59
没有。我原来就有120G的固态硬盘的。

额，用另外的一款旧硬盘安装

加林森 · 发表于 2022-8-17 13:06

马黑黑发表于 2022-8-17 13:00
额，用另外的一款旧硬盘安装

是的。新的没有来之前我先这样了吧。

马黑黑 · 发表于 2022-8-17 13:07

加林森发表于 2022-8-17 13:06
是的。新的没有来之前我先这样了吧。

能用就好的

加林森 · 发表于 2022-8-17 13:17

马黑黑发表于 2022-8-17 13:07
能用就好的

嗯嗯。我把我的整个系统给呢看看，是不是我的电脑老了？
电脑基本信息

我的电脑精英 B75H2-M3 台式电脑

操作系统 Windows 7 旗舰版 Service Pack 1 64位

主显卡独立显卡(对游戏和电影支持较好)

IE浏览器版本号 8.0

基本硬件展示

处理器英特尔第二代酷睿 i5-2320 @ 3.00GHz 四核

主板精英 B75H2-M3

内存 8 GB ( 金士顿 DDR3 1333MHz )

主硬盘三星 SSD 850 EVO 120GB (120 GB / 固态硬盘)

主显卡 NVIDIA GeForce 9600 GT ( 488 MB / EVGA )

显示器飞利浦 PHL0850 Philips 200WS ( 22 英寸 )

网卡瑞昱 RTL8168/8111/8112 Gigabit Ethernet Controller / 精英

声卡瑞昱 ALC662 @ 英特尔 Panther Point High Definition Audio Controller