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

来源：互联网发布：如何提高淘宝店铺销量编辑：程序博客网时间：2024/05/19 19:42

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

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

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

</style>
</head>

<bodyonload="init()">
<divid="drain">
<imgid="background"src=""alt="background" />
</div>

<script>
functioninit() {
var image= document.getElementById("background");
var parentElement= document.getElementById("drain");
image.onload= function() {
var engine= newRainyDay({
// 模糊玻璃窗的图片元素，必须填写
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.效果图

阅读全文

0 0