雨點效果——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,鼠標快速連續點擊頁面,效果很明顯


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com