ここでは、主にRainyday JSライブラリを使用しています。これは非常にシンプルで便利なので、デモコードを読むだけではありません。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<スタイルメディア= "スクリーン">
体 {
オーバーフロー：隠し;
高さ：100％;
マージン：0;
パディング：0;
}
img {
幅：100％;
高さ：100％;
}
</style>
<スクリプトsrc = "http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type = "text/javascript"> </scrip>
<script type = "text/javascript">
function run（）{
var image = document.getElementById（ 'background'）;
image.onload = function（）{
var Engine = new Rainyday（{
画像：これ、
}）;
Engine.Rain（[[1、2、8000]]）;
Engine.Rain（[[3、3、0.88]、[5、5、0.9]、[6、2、1]]、100）;
}
image.crossorigin = 'anonymous';
image.src = 'http://i.imgur.com/n7etzfo.jpg';
}
</script>
<Title>すごい！ </title>
</head>
<body onload = "run（）;">
<img id = "background" src = "" />
</body>
</html>
とてもクールな効果ではありませんか？みんなが気に入ってくれることを願っています。