论坛 › 欢乐水吧 › 黑黑大师檐下雨意静悠然。安宁半山听雨风不休

安宁 发表于 2022-9-6 17:41

黑黑大师檐下雨意静悠然。安宁半山听雨风不休

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1698082">
<br><br><br><br><br /><br /><style>
#papa { left: -220px; width: 1024px; height: 706px; background: url('https://pic.imgdb.cn/item/6304a5e916f2c2beb1c4057e.jpg') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 100%; height: 100%;opacity: .65; }
#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; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 30px; top: 10px;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"><br>半山听雨-洞箫</span>
</div>

<script>

let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1839474588.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 * (50 + Math.random() * 100);
                let line = {
                        speed: 5.5 * (Math.random() * 6 + 3),
                        die: false,
                        posx: e,
                        posy: -50,
                        h: temp,
                        corlor: '#eee'
                };
                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 = "#fff";
                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(ele) {
                let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
                while(pa != null) {
                        x += pa.offsetLeft;
                        y += pa.offsetTop;
                        pa = pa.offsetParent;
                }
                return {x,y};
        }
})();
</script></td></tr></table>
</style>
<br><br><br>

安宁 发表于 2022-9-6 17:43

照片是水果机所拍，效果一般。小暑天，窗外骤雨来。
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_4047022">
</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz"><br><br>
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1122488">
<table style="position: relative; width:600px;" border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD>
<img src="https://pic.imgdb.cn/item/6304a5e916f2c2beb1c4057e.jpg" width="721" _height="382" border="0">
</TBODY></table></div></td></tr></table><br>
</td></tr></table>

安宁 发表于 2022-9-6 17:45

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_4047022">
</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz"><br><br>
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1122488">
<table style="position: relative; width:600px;" border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD>
<img src="https://pic.imgdb.cn/item/62c8fb24f54cd3f9374ce8ab.jpg" width="721" _height="382" border="0">
</TBODY></table></div></td></tr></table><br>
</td></tr></table>

安宁 发表于 2022-9-6 17:45

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_4047022">
</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz"><br><br>
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1122488">
<table style="position: relative; width:600px;" border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD>
<img src="https://pic.imgdb.cn/item/62c8fb2ef54cd3f9374cf4e6.jpg" width="721" _height="382" border="0">
</TBODY></table></div></td></tr></table><br>
</td></tr></table>

安宁 发表于 2022-9-6 17:52

楼主顺手复制粘贴代码简值不要太幸福了。感谢马黑黑辛苦写下代码，此处应有@大猫咪 亲自献上现场版HIGH歌一曲以示敬仰之情。{:4_204:}

加林森 发表于 2022-9-6 18:18

本帖最后由 加林森 于 2022-9-6 18:23 编辑

好漂亮的制作，风景好美。{:4_199:}

红影 发表于 2022-9-6 20:02

风景漂亮，欣赏安宁好帖{:4_204:}

梦缘 发表于 2022-9-6 20:26

好看的风景，动听的音乐，欣赏点赞！{:6_221:}

马黑黑 发表于 2022-9-6 21:00

欣赏安将军大作

醉美水芙蓉 发表于 2022-9-6 21:41

大猫咪 发表于 2022-9-9 20:51

好漂亮！赏心悦目，
俺这也正在下雨，今年一个夏天昆明都在下雨，
这音乐自然是俺和大富贵最爱之一。。
刚才大富贵一直呆呆的坐真窗前看雨，不知道它在想什么，悄悄过去陪它看，它爬到俺怀里撒娇，
然后用头顶了顶俺，意思是一起看雨吧！
突然明白，平凡无奇的生活中猫也需要温暖踏实的幸福{:4_173:}
谢谢安宁美帖，收藏了，辛苦{:4_190:}

{:4_204:}{:4_190:}{:5_106:}

查看完整版本: 黑黑大师檐下雨意静悠然。安宁半山听雨风不休