點擊這裡查看效果
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5水波蕩漾-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="19/keleyishuibo.js"></script>
</head>
<body>
<div style="z-index:10;position:fixed;top:0px;">請使用支持HTML5的浏覽器開打本頁，請點擊鼠標，可以連續點擊。<a href="http:///a/bjac/gq2hi69r.htm">原文</a>
</div>
<canvas id="simple"></canvas>
</body>
</html>
keleyishuibo.js的代碼：
/*
html5水波蕩漾
http:///menu/html5/
*/
(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);
});
})();