雨滴效果——HTML5之特效

雨点效果——HTML5之特效

drop.html内容如下：

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

1楼kunoy昨天 18:01

果真不错，学习了。