论坛 › 欢乐水吧 › 夏日气泡

马黑黑 发表于 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 === 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>

马黑黑 发表于 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 === 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>

马黑黑 发表于 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

老黑辛苦了。来学习了。{:4_176:}

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

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

{:5_108:}

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

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

{:4_190:}

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

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


谢茶！我终于上来了。{:5_102:}

马黑黑 发表于 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

红影 发表于 2022-8-17 16:49

这个触发很敏感，在图上不断移动鼠标，结果就有好多好多的气泡呢{:4_187:}

红影 发表于 2022-8-17 16:50

黑黑又带来了新的好玩的东东{:4_199:}

马黑黑 发表于 2022-8-17 18:21

红影 发表于 2022-8-17 16:50
黑黑又带来了新的好玩的东东

当心玩物丧志

马黑黑 发表于 2022-8-17 18:22

加林森 发表于 2022-8-17 13:17
嗯嗯。我把我的整个系统给呢看看，是不是我的电脑老了？
电脑基本信息



这个配置，能满足你的需求，关键在于硬件是否已经老化，还能用的话继续用就好

查看完整版本: 夏日气泡