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