点评:雨滴特效想必大家都有见到过吧,而本文所要介绍的这个特效是借助HTML5实现的,晶莹剔透,感兴趣的朋友可以尝试运行下
nhxHTML5中文学习网 - HTML5先行者学习网
<html> nhxHTML5中文学习网 - HTML5先行者学习网
<head> nhxHTML5中文学习网 - HTML5先行者学习网
<title>HTML5雨滴特效</title> nhxHTML5中文学习网 - HTML5先行者学习网
<style media="screen" type="text/css"> nhxHTML5中文学习网 - HTML5先行者学习网
img { display: none; } nhxHTML5中文学习网 - HTML5先行者学习网
body { overflow: hidden; } nhxHTML5中文学习网 - HTML5先行者学习网
#canvas { position: absolute; top: 0px; left: 0px; } nhxHTML5中文学习网 - HTML5先行者学习网
</style> nhxHTML5中文学习网 - HTML5先行者学习网
<script src="/jscss/demoimg/201401/rainyday.js" type="text/javascript"></script> nhxHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript"> nhxHTML5中文学习网 - HTML5先行者学习网
function demo() { nhxHTML5中文学习网 - HTML5先行者学习网
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight); nhxHTML5中文学习网 - HTML5先行者学习网
engine.gravity = engine.GRAVITY_NON_LINEAR; nhxHTML5中文学习网 - HTML5先行者学习网
engine.trail = engine.TRAIL_DROPS; nhxHTML5中文学习网 - HTML5先行者学习网
engine.rain([ nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(0, 2, 500) nhxHTML5中文学习网 - HTML5先行者学习网
]); nhxHTML5中文学习网 - HTML5先行者学习网
engine.rain([ nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(3, 3, 0.88), nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(5, 5, 0.9), nhxHTML5中文学习网 - HTML5先行者学习网
engine.preset(6, 2, 1), nhxHTML5中文学习网 - HTML5先行者学习网
], 100); nhxHTML5中文学习网 - HTML5先行者学习网
} nhxHTML5中文学习网 - HTML5先行者学习网
</script> nhxHTML5中文学习网 - HTML5先行者学习网
</head> nhxHTML5中文学习网 - HTML5先行者学习网
<body onload="demo();"> nhxHTML5中文学习网 - HTML5先行者学习网
<img id="demo1" src="/jscss/demoimg/201401/8390.jpg" /> nhxHTML5中文学习网 - HTML5先行者学习网
<div id="cholder"> nhxHTML5中文学习网 - HTML5先行者学习网
<canvas id="canvas"></canvas> nhxHTML5中文学习网 - HTML5先行者学习网
</div> nhxHTML5中文学习网 - HTML5先行者学习网
</body> nhxHTML5中文学习网 - HTML5先行者学习网
</html> nhxHTML5中文学习网 - HTML5先行者学习网
nhxHTML5中文学习网 - HTML5先行者学习网