绿叶清舟 发表于 2023-3-5 17:20

檐下雨意 TO悄然


<style>
#papa { margin: auto;position: relative; left: -250px; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/640419cdf144a01007063382.jpg') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 100%; height: 100%;opacity: .15; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 610px; background: conic-gradient(#6f3a38,#d9cdce,#6f3a38); 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; }
#tit { position: absolute; left: 60px; top: 610px;font: bold 22px / 40px sans-serif; color: lightgray; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }</style>

<div id="papa">
<canvas id="canv"></canvas>
<span id="disc"></span>
<span id="tit">檐下雨意 TO悄然</span></div>

<script>let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1467202310.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 main() {
        let canv = document.getElementById('canv');
        let ctx = canv.getContext('2d');
        canv.width = canv.clientWidth;
        canv.height = canv.clientHeight;
        let dropList = [], linelist = [], mousePos = ;
        let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;

        window.onmousemove = function (e) {
                mousePos = e.clientX - offset(papa).x;
                mousePos = e.clientY - offset(papa).y;
                maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
        }

        function createLine(e) {
                let temp = 0.25 * (10 + Math.random() * 50);
                let line = {
                        speed: 1.5 * (Math.random() * 6 + 3),
                        die: false,
                        posx: e,
                        posy: -50,
                        h: temp,
                        corlor: '#dfd3d7'
                };
                linelist.push(line);
        }

        function createDrop(x, y) {
                let drop = {
                        die: false,
                        posx: x,
                        posy: y,
                        vx: (Math.random() - 0.5) * 8,
                        vy: Math.random() * (-6) - 3,
                        radius: Math.random() * 1.5 + 1
                };
                return drop;
        }

        function madedrops(x, y) {
                let maxi = Math.floor(Math.random() * 5 + 5);
                for (let i = 0; i < maxi; i++) {
                dropList.push(createDrop(x, y));
                }
        }

        window.requestAnimationFrame(update);

        function update() {
                if (dropList.length > 0) {
                        dropList.forEach(function (e) {
                                e.vx = e.vx + (speedx / 2);
                                e.posx = e.posx + e.vx;
                                e.vy = e.vy + gravity;
                                e.posy = e.posy + e.vy;
                                if (e.posy > canv.clientHeight) {
                                e.die = true;
                                }
                        });
                }
                for (let j = dropList.length - 1; j >= 0; j--) {
                        if (dropList.die) {
                                dropList.splice(j, 1);
                        }
                }
                speedx = speedx + (maxspeedx - speedx) / 50;
                for (let i = 0; i < lineNum; i++) {
                        createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
                }
                let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
                linelist.forEach(function (e) {
                        let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
                        if (dis < mouseDis) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if ((e.posy + e.h) > endLine) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if (e.posy >= canv.clientHeight) {
                                e.die = true;
                        } else {
                                e.posy = e.posy + e.speed;
                                e.posx = e.posx + e.speed * speedx;
                        }
                });
                for (let j = linelist.length - 1; j >= 0; j--) {
                        if (linelist.die) {
                                linelist.splice(j, 1);
                        }
                }
                render();
                window.requestAnimationFrame(update);
        }

        function render() {
                ctx.fillRect(0, 0, canv.width, canv.height);
                ctx.lineWidth = 1;
                linelist.forEach(function (line) {
                        ctx.strokeStyle = line.color;
                        ctx.beginPath();
                        ctx.moveTo(line.posx, line.posy);
                        ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
                        ctx.stroke();
                });
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "#dfd3d7";
                dropList.forEach(function (e) {
                        ctx.beginPath();
                        ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
                        ctx.stroke();
                });
        }

        function offset(e) {
                let x = e.offsetLeft, y = e.offsetTop, pa = e.offsetParent;
                while(pa != null) {
                        x += pa.offsetLeft;
                        y += pa.offsetTop;
                        pa = pa.offsetParent;
                }
                return {x, y};
        }
})();</script>

雨中悄然 发表于 2023-3-5 18:23

十分古典素雅的贴子，太漂亮了，谢谢舟舟{:4_187:}

红影 发表于 2023-3-5 19:21

这个代码于是可以鼠标跟随的。清舟这个帖子做得漂亮。悄然收礼开心{:4_187:}

庶民 发表于 2023-3-5 19:24

意境很优美的，引入深思。

马黑黑 发表于 2023-3-5 20:02

矮油，古代镁铝淋雨啦，当心感冒，阿司匹林古人不习惯{:4_170:}

樵歌 发表于 2023-3-5 20:44

意境很美，但把斜雨把美人儿淋湿了有人不答应。{:4_173:}

绿叶清舟 发表于 2023-3-5 20:48

马黑黑 发表于 2023-3-5 20:02
矮油，古代镁铝淋雨啦，当心感冒，阿司匹林古人不习惯

本来是另一个音乐的，找贴时感觉这个更好就全搬来了{:4_189:}

绿叶清舟 发表于 2023-3-5 20:49

樵歌 发表于 2023-3-5 20:44
意境很美，但把斜雨把美人儿淋湿了有人不答应。

赶紧给打伞啊，这么好的机会{:4_189:}

绿叶清舟 发表于 2023-3-5 20:49

庶民 发表于 2023-3-5 19:24
意境很优美的，引入深思。

谢谢庶民，晚上好

绿叶清舟 发表于 2023-3-5 20:50

红影 发表于 2023-3-5 19:21
这个代码于是可以鼠标跟随的。清舟这个帖子做得漂亮。悄然收礼开心

是啊，另一个下雨的以前没保留了

绿叶清舟 发表于 2023-3-5 20:51

雨中悄然 发表于 2023-3-5 18:23
十分古典素雅的贴子，太漂亮了，谢谢舟舟

客气啥啊喜欢就好啦

樵歌 发表于 2023-3-5 20:51

绿叶清舟 发表于 2023-3-5 20:49
赶紧给打伞啊，这么好的机会

要打也是5 楼的切。{:4_189:}

绿叶清舟 发表于 2023-3-5 20:57

樵歌 发表于 2023-3-5 20:51
要打也是5 楼的切。

五楼送药去了{:4_189:}

马黑黑 发表于 2023-3-5 21:02

绿叶清舟 发表于 2023-3-5 20:48
本来是另一个音乐的，找贴时感觉这个更好就全搬来了

挺好挺好

鱼儿 发表于 2023-3-6 10:23

雨中悄然{:7_313:}

红影 发表于 2023-3-6 11:11

绿叶清舟 发表于 2023-3-5 20:50
是啊，另一个下雨的以前没保留了

我好像记得就这么吧，哦，之前还有个，比这个简单点的，代码也比这个短{:4_173:}

雨中悄然 发表于 2023-3-6 12:23

绿叶清舟 发表于 2023-3-5 20:51
客气啥啊喜欢就好啦

咱不客气。鼠标跟随试了一下，新奇的效果{:4_187:}

顾-念 发表于 2023-3-6 13:26

这雨下的，要是金子多好，哈哈

图做的总这么好

大猫咪 发表于 2023-3-6 15:41

听，此刻，外面正在下雨……{:4_173:}

绿叶清舟 发表于 2023-3-8 20:34

大猫咪 发表于 2023-3-6 15:41
听，此刻，外面正在下雨……

淋湿了没有啊
页: [1] 2
查看完整版本: 檐下雨意 TO悄然