html5怎么实现雨滴效果,雨滴效果——HTML5之特效

雨点效果——HTML5之特效

drop.html内容如下：

$(document).ready(function(){

});

其中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，鼠标快速连续点击页面，效果很明显

1楼kunoy昨天 18:01果真不错，学习了。