返回顶部

收藏

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. lerry 发表 2013-05-17 06:13:00 用javascript实现html5 播放音乐的淡出效果
  2. Airen 发表 2018-01-20 16:55:20 借助HTML5 details,summary无JS实现各种交互效果
  3. 博主 发表 2014-10-12 03:15:19 pjax: 当ajax遇上pushState
  4. damon 发表 2015-07-21 07:36:11 常用JavaScript类库与框架总结
  5. 小琪 发表 2013-04-22 09:09:32 HTML5图像处理 (续) – 局部红色
  6. 扣钉骑士 发表 2014-01-01 08:57:47 MIDI in HTML5
  7. welpher 发表 2011-10-20 07:23:27 html5,初次见面
  8. 博主 发表 2014-07-19 10:14:19 开源HTML5游戏引擎Kiwi.js
  9. liuyanghejerry 发表 2014-04-15 16:40:22 Beacon API 来了
  10. 新一 发表 2015-02-08 01:57:47 HTML5 canvas验证码识别
  11. oldj 发表 2015-09-07 12:50:39 HTML5塔防游戏小更新
  12. 博主 发表 2015-05-05 06:12:34 小试webSocket

发表评论