返回顶部

收藏

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

标签:html5,雨点效果,javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 米豆网 - 1000seo 发表 2012-09-12 02:47:16 微软Windows应用商店今起向开发者全面开放
  2. iefans 发表 2013-04-08 05:40:47 构建现代站点且同时支持旧版IE的20个提示
  3. oldj 发表 2015-09-07 12:50:39 HTML5塔防游戏小更新
  4. 博主 发表 2015-05-05 06:12:34 HTML5特性,网络检测
  5. lite3 发表 2013-01-12 23:54:58 使用表单元素和CSS3代替JavaScript
  6. 尖兵 发表 2016-02-02 15:59:07 2016新三板游戏股投资指南:最赚钱的渠道商反而没有投资空间!
  7. David Walsh 发表 2013-10-15 13:23:48 Using TogetherJS
  8. 彬Go 发表 2014-03-23 12:25:41 自定义元素–为你的HTML代码定义新元素
  9. ajaxj 发表 2014-07-09 13:49:33 web开发利器之grunt
  10. sam 发表 2015-02-11 04:20:52 Qunee for HTML5与ECharts对比
  11. 博主 发表 2013-08-23 11:41:26 Web Notification
  12. techug 发表 2018-06-30 06:20:30 前端技术展示:一百种时钟