rainday.js实现canvas绘制下雨的效果

最新推荐文章于 2025-05-18 09:00:02 发布

qq_36354609

最新推荐文章于 2025-05-18 09:00:02 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36354609/article/details/77773871

本文介绍了一个简单的网页应用，用于在图片上实现模糊的雨滴效果。通过加载一张背景图片，并利用 RainyDay 库，可以生成带有动态雨滴的模糊玻璃窗效果。代码中详细展示了如何初始化效果及设置相关参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码如下所示，已添加注释

<!DOCTYPE html>
<html
lang="en">

<head>
<title>绘制雨滴效果</title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<script
src="js/rainyday.min.js"></script>
<style>

</style>
</head>

<body
onload="init()">
<div
id="drain">
<img
id="background"
src=""
alt="background" />
</div>

<script>
function
init() {
var image
= document.getElementById("background");
var parentElement
= document.getElementById("drain");
image.onload
= function() {
var engine
= new
RainyDay({
// 模糊玻璃窗的图片元素，必须填写
image:
this,
// canvas的父元素，如果不提供则默认为body。
parentElement:
this.parentElement,
// 如果只使用图像的某一部分，用此参数提供坐标。如果不提供则默认为整幅图片。
// crop: [0, 0, 1, 100],
// 定义模糊的下雨雨滴效果。如果不提供值，默认为10。设置为0表示无模糊效果。
blur:
10,
// 定义雨滴的透明度
opacity:
0

});
engine.rain(
[
[1,
0, 20],
[3,
3, 1]
], 100);
};
// image.crossOrigin = 'anonymous';
image.src
= "img/HRtuQo8.jpg";
}
</script>
</body>

</html>

2.rainday.js可以在网上查找

3.效果图