Comment: I believe everyone has seen the raindrop special effects, and the special effects to be introduced in this article are implemented with the help of HTML5, which is crystal clear. Interested friends can try to run them.
<html>
<head>
<title>HTML5 Raindrop Special Effect</title>
<style media="screen" type="text/css">
img { display: none; }
body { overflow: hidden; }
#canvas { position: absolute; top: 0px; left: 0px; }
</style>
<script src="/jscss/demoimg/201401/rainyday.js" type="text/javascript"></script>
<script type="text/javascript">
function demo() {
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
engine.rain([
engine.preset(0, 2, 500)
]);
engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
</head>
<body>
<img src="/jscss/demoimg/201401/8390.jpg" />
<div>
<canvas></canvas>
</div>
</body>
</html>