雨点效果——HTML5之特效
drop.html内容如下：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="drop.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<canvas id="simple"></canvas>
</body>
</html>
其中jquery-1.7.2.min.js为jquery文件，引用自己滴
drop.js文件内容如下
(function () {
var canvas = null,
context = null,
drops = [];
function resetCanvas() {
canvas = document.getElementById("simple");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext("2d");
}
function animate() {
context.save();
try {
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "rgba(68,221,255,0.5)";
context.lineWidth = 4;
var ii = 0;
while (ii < drops.length) {
context.beginPath();
//context.rect(drops[ii].x, drops[ii].y, drops[ii].size, drops[ii].size);
context.arc(drops[ii].x, drops[ii].y, drops[ii].size, 0, 2 * Math.PI, false);
context.stroke();
drops[ii].size += 2;
if (drops[ii].size > drops[ii].maxSize) {
drops.splice(ii, 1);
} else {
ii++;
}
}
} finally {
context.restore();
}
}
$(window).bind("resize", resetCanvas).bind("reorient", resetCanvas);
$(document).ready(function () {
window.scrollTo(0, 1);
resetCanvas();
document.body.addEventListener("mousedown", function (evt) {
drops.push({
size: 2,
maxSize: 20 + (Math.random() * 50),
x: evt.pageX,
y: evt.pageY
});
evt.preventDefault();
}, false);
setInterval(animate, 40);
});
})();有兴趣的可以试试玩一玩，用支持html5的浏览器打开drop.html，鼠标快速连续点击页面，效果很明显