HTML5之特效之雨点效果代码_JavaScript

HTML5之特效之雨点效果代码

<!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>

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);
    });
})();