请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
rainyday 是模拟雨天窗玻璃凝结水珠子的一个JS插件，作者 Marek Brodziak，官网 https://mubaidr.js.org/rainyday.js/，当前版本 v0.1.7，16.5KB大小，开源项目。
插件使用canvas画布绘制动态水珠，效果逼真到令人叹为观止。尝试将其用到帖子过程中碰上不少问题，意欲放弃，但实在难舍其浑然天成的特效，牺牲一个午休时间，终将其降服，成功用到帖子中来。
问题出在rainyday的布局上。新版本提供 parentElement 参数，就是canvas画布宿主，如若不配置，默认使用body，这将占用浏览器全部的可视区域乃至更多。若设置了 parentElement 参数，宿主元素相对定位的情况下，canvas画布的自动偏移非常离谱，具体是随宿主元素 margin 属性值偏移。论坛做宽幅帖子，需要宿主元素相对定位，所以不能通过帖子容器元素直接定位canvas画布，需要另外一个绝对定位的子元素来装载rainyday追加的画布，即便如此，rainyday追加的canvas画布仍然受到宿主元素的父元素的 margin 属性所影响，还需要额外处理：通过JS获得对canvas的操作权限，然后将其left和top设置为0。以下是具体处理代码：
<script>
var engine;
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/rainyday.js';
document.body.appendChild(sF);
sF.onload = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
engine = new RainyDay({
image: this,
parentElement: mama,
});
var canv = document.querySelector('#papa canvas');
canv.style.cssText += 'left: 0; top: 0';
mState();
};
image.src = 'https://638183.freep.cn/638183/t24/2/f11.jpeg';
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? engine.pause() : engine.resume();
};
aud.onplaying = aud.onpause = () => mState();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
};
</script>
上述代码第14、15行就是强行将rainyday绘制的canvas画布的左上角强行拉回 id="mama" 的div容器的左上角，mama则是帖子容器元素的子元素，宽高100%，绝对定位，与帖子容器元素贴合。
rainyday插件的必填参数 image 支持有背景图片的元素，举例说，如果帖子容器带有背景图片，则可以直接将其 id 作为 image 参数的值，这其实是最理想的做帖子的姿势——水珠特效基本就约束在帖子容器里。但有个前提：图片必须是同源图片，就是说不能是跨域图片。还有一个小问题：margin-top、margin-bottom依然会影响canvas的位置。对于图片跨域，由于 crossOrigin 只针对图片、音视频等媒体，只有通过修改插件源码解决问题，但如果使用的是官网或第三方的资源，我们没有修改权限；对于外边距的上下边距对画布位置的影响，解决方法是不设置这两个值或设为 0 便可。
演示实例地址一：http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1715127196
演示实例地址二：http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1715127531
演示实例地址三：https://www.huachaowang.com/thread-75822-1-1.html
| 
发表于 2024-5-8 13:17
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-8 17:48
实际跟理论有差别，或者是有某个隐藏的代码，跟特务一样潜伏者