html5

浏览数：65 / 时间：2015年06月09日
<!DOCTYPE html>
        <html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>云镜</title>
    <style type="text/css">
        body {
            background: #000;
            min-height: 580px;
            color: #fff;
            font: normal 13px/26px "Libre Baskerville",serif;
            font-smooth: always;
            -webkit-font-smoothing: antialiased;
        }
        #experience {
            perspective: 800px;
            width: 100%;
            min-height: 580px;
            overflow: hidden;
            position: relative;
            z-index: 20;
        }
        #lines {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 30;
            pointer-events: none;
            opacity: .55;
        }
    </style>
</head>
<body>

    <div id="experience">
        <canvas id="lines"></canvas>
    </div>

</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    var experience = {
        page : null,
        resize: null,
        init : function(){
            // SET
            if($(‘#lines‘).length){
                this.setLines();
            }
        },
        setLines : function(){
//            console.log(this);
            this.canvas = document.querySelector(‘canvas‘);

            var ctx = this.canvas.getContext(‘2d‘),
                    color = ‘#ffffff‘;                  //控制颜色
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
            this.canvas.style.display = ‘block‘;
            ctx.fillStyle = color;
            ctx.lineWidth = .2;                         //线条粗细，1018修改为.2，本来是.1
            ctx.strokeStyle = color;                    //线条颜色

            /*控制resize后的canvas*/
            this.resize = function(){
                experience.canvas.width = window.innerWidth;
                experience.canvas.height = window.innerHeight;
                ctx.fillStyle = color;
                ctx.lineWidth = .1;
                ctx.strokeStyle = color;
            };

            $(window).on(‘resize‘, experience.resize);
            /*控制resize后的canvas End*/

            var mousePosition = {         //开始时线条集合中心点的位置
                x: 30 * experience.canvas.width / 100,
                y: 30 * experience.canvas.height / 100
            };

            var dots = {
                nb: 250,        //效果中点个数
                distance: 80,   //distance代表当星星之间的距离是多少时连接产生线条
                d_radius: 150,  //控制可显示的线条的区域大小
                array: []       //点和线的集合的数组
            };

            function Dot(){         //Dot函数对象是代表的是点，被实例化了点的个数次
                this.x = Math.random() * experience.canvas.width;    //表示点的在DOM加载完成时的初始水平位置，如果是个常量，则所有点都在一个位置，产生的效果类似烟花爆炸的效果,另外，无论初始在哪里，所有的点最终都会散布开来，要不然不会有烟花效果
                this.y = Math.random() * experience.canvas.height;   //表示点的在DOM加载完成时的初始垂直位置，如果是个常量，则所有点都在一个位置，产生的效果类似烟花爆炸的效果,另外，无论初始在哪里，所有的点最终都会散布开来，要不然不会有烟花效果
                this.vx = -.5 + Math.random();
                this.vy = -.5 + Math.random();
                this.radius = Math.random();    //控制点的圆大小

            }

            Dot.prototype = {   //绘制点的圆
                create: function(){
                    ctx.beginPath();    //beginPath() 方法开始一条路径，或重置当前的路径
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);    //arc() 方法创建弧/曲线（用于创建圆或部分圆）
                    ctx.fill(); //fill() 方法填充当前的图像（路径）。默认颜色是黑色。如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
                }
            };

            Dot.animate = function(){
                var i, dot;

                for(i = 0; i < dots.nb; i++){
                    dot = dots.array[i];

                    if(dot.y < 0 || dot.y > experience.canvas.height){
                        dot.vx = dot.vx;
                        dot.vy = - dot.vy;
                    }
                    else if(dot.x < 0 || dot.x > experience.canvas.width){
                        dot.vx = - dot.vx;
                        dot.vy = dot.vy;
                    }
                    dot.x += dot.vx;
                    dot.y += dot.vy;
                }
            };

            /*绘制线条的核心算法*/
            Dot.line = function(){
                var i, j, i_dot, j_dot;

                for(i = 0; i < dots.nb; i++){
                    for(j = 0; j < dots.nb; j++){
                        i_dot = dots.array[i];
                        j_dot = dots.array[j];

                        if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
                            if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
                                ctx.beginPath();
                                ctx.moveTo(i_dot.x, i_dot.y);   //moveTo() 方法把路径移动到画布中的指定点，不创建线条。
                                ctx.lineTo(j_dot.x, j_dot.y);   //lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
                                ctx.stroke();   //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
                                ctx.closePath();    //closePath() 方法创建从当前点到开始点的路径。
                            }
                        }
                    }
                }
            };

            function createDots(){
                var i;

                ctx.clearRect(0, 0, experience.canvas.width, experience.canvas.height); //clearRect()方法清空给定矩形内的指定像素。

                if(dots.array.length < 1) {         //在没有dot的条件下，创建对应dot数的dot
                    for(i = 0; i < dots.nb; i++){
                        dots.array.push(new Dot());
                    }
                }

                for(i = 0; i < dots.nb; i++){
                    var dot = dots.array[i];
                    dot.create();
                }

                Dot.line();
                Dot.animate();
            }
            /*绘制线条的核心算法 End*/

            $(‘#experience‘).on(‘mousemove mouseleave‘, function(e){
                if(e.type == ‘mousemove‘){
                    mousePosition.x = e.pageX;
                    mousePosition.y = e.pageY;
                }
                if(e.type == ‘mouseleave‘){
                    mousePosition.x = experience.canvas.width / 2;      //回归到未移入之前的位置
                    mousePosition.y = experience.canvas.height / 2;     //回归到未移入之前的位置
                }
            });

            this.interval = setInterval(createDots, 1000/30);   //控制线条变化的速度

        },

        destroy : function() {
            if(this.interval) {
                clearInterval(this.interval);       //清除setnterval
            }
            if(experience.resize){
                $(window).on(‘resize‘, experience.resize);
            }

        }
    };

    experience.init();
</script>
        </html>