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

雨点效果——HTML5之特效相关推荐

html5怎么实现雨滴效果,雨滴效果——HTML5之特效
雨点效果--HTML5之特效 drop.html内容如下: $(document).ready(function(){ }); 其中jquery-1.7.2.min.js为jquery文件,引用自己滴 ...
html酷炫电子时钟效果,Html5时钟特效代码
Html5时钟特效代码html> 时钟 canvas{display: block;margin: 0 auto;} 抱歉,您的浏览器不支持canvas画布 var myCanvas=docum ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
html5添加flash动画效果,霸气的HTML5 7款无Flash HTML5动画特效
本文作者html5tricks,转载请注明出处以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在 1.HTML5 Canvas火焰喷射动画效果还记得以前分享过的一款HTML5烟 ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果
passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...
怎么把 html做成雪花特效,CSS3 HTML5下雪特效雪花飘飘
CSS3 HTML5下雪特效雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...
html5 特效框架,超级惊艳 10款HTML5动画特效推荐
原标题:超级惊艳 10款HTML5动画特效推荐今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分 ...

雨点效果——HTML5之特效

雨点效果——HTML5之特效相关推荐

最新文章

热门文章