1.國際慣例，先上效果圖

2.查看演示請看 這裏 。

3 代碼

html：

<canvas id="canvas" width="1920" height="1080"></canvas>

　js: 這代碼看起來可以說十分直白了，註釋不放過任何一個角落。

var canvas = document.getElementById(‘canvas‘);
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
canvas.width 
 
= width;
canvas.height = height;
var ctx = canvas.getContext(‘2d‘);
var PI = Math.PI;
// 點的數量
var point_count = 100;
// 存放點的數組
var point_list = new Array(point_count);
// 最大點間距
var max_space = 50;
// 每次更新位置最大的行進距離
var max_speed = 1;
// 點的半徑
var point_r = 3;
// 線寬
var lineWidth = 1;
var strokeStyle = ‘#2779D7‘;
var
 
 fillStyle = ‘#2779D7‘;

for (var i = 0; i < point_count; i++) {
    point_list[i] = {
        // x 軸位置
    x: Math.round(Math.random() * (width - point_r * 2)),
    // y 軸位置
    y: Math.round(Math.random() * (height - point_r * 2)),
    // x 軸速度
    speedX: Math.random() * max_speed * 2 - max_speed,
    
 
// y 軸速度
        speedY: Math.random() * max_speed * 2 - max_speed,
    }
}

function update() {
    point_list.forEach(function (value) {
        // 更新位置信息
    value.x += value.speedX;
    value.y += value.speedY;
    // 超出屏幕後 在屏幕另一側對應位置出現
    // if (value.x > width + max_space) value.x = -max_space;
    // if (value.x < -max_space) value.x = width + max_space;
    // if (value.y > height + max_space) value.y = -max_space;
    // if (value.y < -max_space) value.y = height + max_space;
    // 碰壁反彈
        if (value.x > width || value.x < 0) value.speedX = -value.speedX;
        if (value.y > height || value.y < 0) value.speedY = -value.speedY;
    })
}

function draw() {
    var arr = point_list;
    ctx.clearRect(0, 0, width, height)
    ctx.strokeStyle = strokeStyle;
    ctx.fillStyle = fillStyle;
    ctx.lineWidth = lineWidth;
    for (var i = 0; i < arr.length; i++) {
        ctx.beginPath()
        ctx.globalAlpha = 1
        ctx.arc(arr[i].x, arr[i].y, point_r, 0, PI * 2)
        ctx.fill()
        for (var j = i + 1; j < arr.length; j++) {
            // 計算每兩個點的距離，  三角形的斜邊 的平方 = 兩直角邊平方和  
            var s = max_space - Math.sqrt((arr[j].x - arr[i].x) * (arr[j].x - arr[i].x) + (arr[j].y - arr[i].y) * (arr[j].y - arr[i].y));
            // 計算的兩點之間線的透明度，如果距離小於最大距離 透明度為 1 ， 如果大於 最大距離小於 1.5倍最大距離，透明度線性衰減，大於1.5倍時透明度為0
            var opc = (s >= 0 ? 1 : (s < - max_space / 2) ? 0 : 1 - s / - max_space * 2);
            // 通過線透明度判斷是否需要畫線，如果透明度大於零，就劃線。
            if (opc > 0) {
                ctx.beginPath();
                ctx.globalAlpha = opc;
                // 畫直線
                // ctx.moveTo(arr[i].x, arr[i].y);
                // ctx.lineTo(arr[j].x, arr[j].y);
                // 畫貝塞爾曲線
                ctx.moveTo(arr[i].x, arr[i].y);
                ctx.bezierCurveTo(arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[i].x + arr[j].x - arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[j].x, arr[j].y);
                ctx.stroke();
            }
    }
}
// 更新位置
    update();
}
function loop() {
    // 循環程序
    draw();
    setTimeout(loop, 1000/60)
}
window.onload = loop;

（）

canvas - 簡單的神經網絡