您的位置：首页 > Web前端 > JavaScript

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

2017-09-01 15:40 639 查看

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
9ee0
.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.效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航