您的位置:首页 - HTML5
HTML5雨点落入池塘水波荡漾
点击这里查看效果
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5水波荡漾-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/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://keleyi.com/a/bjac/gq2hi69r.htm">原文</a>
</div>
<canvas id="simple"></canvas>
</body>
</html>

keleyishuibo.js的代码:
/*
html5水波荡漾
http://keleyi.com/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);
});
})();
本站导航
相关文章
柯乐义 Copyright© keleyi.com