このゴージャスなキャンバスを作る方法

Question

私はこのウェブサイトを見ていて、そのスライダーの何かが私の注意を引いた。 キャンバスの周りを動くドットがいくつかあります。マウスを動かすと、ラインとその素晴らしいものがつながります。

プラグインは何ですか、またはそのようにする方法を知っていますか？

[私は他のウェブサイト上でこのような何かを見たので]私はhttp://hostiran.net/からこのイメージを捕獲しました。私はあなたの助けに感謝します。

Answer 1

このcanvasのアイデアは、スクリーンの周りに浮遊するランダムな粒子をプロットし、一定の輝度を傍受するたびに互いに接続します。このコードは、粒子が描かれているどのようにあなたのアイデアを与えることです：あなたはライブラリを使用することができます

function() { 
    var pos = [round(this.position[0]), round(this.position[1])] 
    , connections = 0; 
    context.globalAlpha = 0.1; 
    for (var i = 0; i < maxPoolSize; i++) { 
    var boid = pool[i] 
     , distance = this.distanceTo(boid) 
     , opacity = 1-(distance/distanceThreshold) 
    ; 
    if(distance <= distanceThreshold) { 
     connections++; 
     if(!this.isConnectedTo(boid)){ 
     this.connectTo(boid); 
     context.beginPath(); 
     context.moveTo(pos[0], pos[1]); 
     context.lineTo(round(boid.position[0]), round(boid.position[1])); 
     context.stroke(); 
     } 
    } 
    }; 
    context.globalAlpha = 0.5; 

は particles.jsと呼ばれるか、他以下 oneのように、 codepen上のいくつかの例を探してください。

私の答えがあなたに役立つことを願っています。