{fwtab}
{fwh}
{fwthead target="1"} JS部分 {/fwthead}
{fwthead target="2"} CSS部分 {/fwthead}
{fwthead target="3"} HTML部分 {/fwthead}
{/fwh}
{fwb}
{fwtbody target="1"}

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 2);
    };
})();

var myCanvas = document.getElementById("canvas");
var ctx = myCanvas.getContext("2d"); //getContext 设置画笔
var num;
var w, h;
var duixiang = [];
var move = {};
function widthheight() {
    w = myCanvas.width = window.innerWidth;
    h = myCanvas.height = window.innerHeight;
    num = Math.floor(w * h * 0.00028); //点的数量。根据屏幕大小确定
    for (var i = 0; i < num; i++) {
        duixiang[i] = {
            x: Math.random() * w,
            y: Math.random() * h,
            cX: Math.random() * 0.6 - 0.3,
            cY: Math.random() * 0.6 - 0.3,
            R: Math.floor(Math.random() * 5) + 2,
            //CC:Math.floor(Math.random()*3)+2,
            r: Math.floor(Math.random() * 254),
            g: Math.floor(Math.random() * 254),
            b: Math.floor(Math.random() * 254)
        }
        // console.log(duixiang[i])
        Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);
        //Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].CC);
    }
};
widthheight(); //获取浏览器的等宽度等高
function Cricle(x, y, R, r, g, b) {
    ctx.save(); //保存路径
    if (Math.random() > 0.991) {
        ctx.globalAlpha = 0.9;
    } //ctx.fillStyle = "#CCC";}//填充的背景颜色
    else {
        ctx.globalAlpha = 0.47;
    }
    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.beginPath(); //开始绘画
    ctx.arc(x, y, R, Math.PI * 2, 0); //绘画圆 x y 半径(大小) 角度 一个PI 是180 * 2 = 360 真假 0/1 true/false
    ctx.closePath(); //结束绘画
    ctx.fill(); //填充背景颜色
    ctx.restore(); //回复路径
};
Cricle();

!
function draw() {
    ctx.clearRect(0, 0, w, h) //先清除画布上的点
    for (var i = 0; i < num; i++) {
        duixiang[i].x += duixiang[i].cX;
        duixiang[i].y += duixiang[i].cY;
        if (duixiang[i].x > w || duixiang[i].x < 0) {
            duixiang[i].cX = -duixiang[i].cX;
        }
        if (duixiang[i].y > h || duixiang[i].y < 0) {
            duixiang[i].cY = -duixiang[i].cY;
        }
        Cricle(duixiang[i].x, duixiang[i].y, duixiang[i].R, duixiang[i].r, duixiang[i].g, duixiang[i].b);

        //勾股定理判断两点是否连线
        for (var j = i + 1; j < num; j++) {
            if ((duixiang[i].x - duixiang[j].x) * (duixiang[i].x - duixiang[j].x) + (duixiang[i].y - duixiang[j].y) * (duixiang[i].y - duixiang[j].y) <= 55 * 55) {
                line(duixiang[i].x, duixiang[i].y, duixiang[j].x, duixiang[j].y, 0, i, j)
            }
            if (move.x) {
                if ((duixiang[i].x - move.x) * (duixiang[i].x - move.x) + (duixiang[i].y - move.y) * (duixiang[i].y - move.y) <= 100 * 100) {
                    line(duixiang[i].x, duixiang[i].y, move.x, move.y, 1, i, 1)
                }
            }
        }
    }
    window.requestAnimationFrame(draw)
} ();

//绘制线条
function line(x1, y1, x2, y2, flag, i, j) {
    if (flag) {
        var color = ctx.createLinearGradient(x1, y1, x2, y2);
        ctx.globalAlpha = 0.5;
        color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
        color.addColorStop(0.8, "#019ee5");
    } else {
        var color = ctx.createLinearGradient(x1, y1, x2, y2);
        ctx.globalAlpha = 0.9;
        color.addColorStop(0, "rgb(" + duixiang[i].r + "," + duixiang[i].g + "," + duixiang[i].b + ")");
        color.addColorStop(1, "rgb(" + duixiang[j].r + "," + duixiang[j].g + "," + duixiang[j].b + ")");
    }
    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    //ctx.restore();
}

//document.onmousemove = function(e){
// move.x = e.clientX;
// move.y = e.clientY;
//}
//console.log(move)//去掉注释 ，可以与背景互动
window.onresize = function() {
    location.reload();
}

{/fwtbody}
{fwtbody target="2"}

* {
    margin: 0;
    padding: 0;
}

#canvas {
    position: fixed;
    background: #ccc;
    overflow: auto;
    z-index: -1;
}

{/fwtbody}
{fwtbody target="3"}

<canvas id="canvas"></canvas>

{/fwtbody}
{/fwb}
{/fwtab}