人気のダイナミックな背景接続効果。以下のコードは、抽出したコードに対して作者がコメントを付けて整理したもので、参考学習に非常に適しています。
効果のスクリーンショット:
効果デモ: https://jc1144096387.github.io/canvas_nest/
著者のアドレス: https://blog.csdn.net/u013556477/article/details/82819785
HTMLコード（テストコード）：
<!doctype html><html lang=ja> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=作成者のコンテンツ=> <meta name=キーワードコンテンツ=> <meta name=Description content=> <title>キャンバス シーンの接続効果</title> <style type=text/css>*{ margin: 0px; padding: 0px; } body{ 背景色: #f4f4f4; }</style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: 固定; ; z インデックス: -1; 不透明度: 0.5;></canvas> --> <script type=text/javascript src=test-clear.js opacity=0 .6></script></body></html>JavaScript コード:
// 関数をすぐに実行します。 //! は、これが関数宣言ではなく関数式であることを JavaScript エンジンに伝えるために使用されます (),! 、+、-、およびその他の演算子でこの効果を実現できますが、() が最も安全です // !function(){} の後に () を追加すると、関数がすぐに呼び出されます // これにより、プライベート スコープをシミュレートできます。 file は複数の js ファイルを参照するときに変数の競合を引き起こしません! function() { //Canvas 要素関連 // Canvas 要素を作成し、Canvas 要素の ID を設定します var Canvas = document.createElement(canvas), context = Canvas .getContext (2d)、属性 = getAttr(); //作成されたキャンバスの関連属性を設定します Canvas.id = c_n + attr.length; Canvas.style.cssText = Position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //ボディ要素にキャンバス要素を追加します document.getElementsByTagName(body)[0].appendChild(canvas); //この関数は、キャンバス要素の幅属性と高さ属性を設定します getWindowWH(); //ウィンドウまたはフレームのサイズが変更されると、onresize イベントが発生します //ウィンドウ サイズが変更されると、ウィンドウの幅と高さが次のようになります。そして、キャンバス要素の幅と高さを設定します window.onresize = getWindowWH; //この関数は、このファイルを参照するスクリプト要素を取得します。 //このファイルへの代入時にgetScript関数が一度実行されるため、htmlファイルがこのファイルを参照する際、このファイル以降のscriptタグはブラウザで解釈されません。 //したがって、取得したスクリプト配列では、この記事を参照するスクリプト要素が配列の最後にあります。 //この関数の目的は、開発者がファイルを HTML に導入するスクリプト要素の属性を直接変更できるようにすることです。 Canvas のいくつかのプロパティ、Canvas の Z インデックス、透明度、小さな正方形の数、色を変更します。 // 開発者が使用したい場合は、前のコードと連携して、Canvas 要素を body 要素に追加します。この特殊効果を背景として使用するには、スクリプト要素を HTML ファイルに追加し、このファイルを引用するだけです。 function getAttr() { let scripts = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v は、このドキュメントの script 要素を参照する最後の script 要素 return { length: len, z: script. getAttribute (zIndex) || -1、不透明度: script.getAttribute(opacity) || 色: script.getAttribute(color) || カウント: script.getAttribute(count) || 99 } } //ウィンドウの幅と高さを取得し、キャンバス要素の幅と高さを設定します。 function getWindowWH() { W = Canvas.width = window.innerWidth || document.documentElement.clientWidth || || document.body .clientWidth, H = Canvas.height = window.innerHeight || document.body.clientHeight } //ランダムな位置に小さな正方形を生成します var random = Math.random, squares = [] //小さな正方形を保存します//小さな正方形を squares[] 配列に入れます for (let p = 0; p < attr.count; p++; ) { var square_x = random() * W, //横座標 square_y = random() * H, //縦座標 square_xa = 2 * random() - 1, //x 軸変位-1,1 square_ya = 2 * ランダム() - 1; //Y 軸の変位 squares.push({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, max: 6000 }) } // 小さなマウス正方形を生成します var Mouse = { x: null, y: null, max: 20000 }; //マウスの座標を取得 window.onmousemove = function(i) { //i は W3C DOM、window.event IE DOM の場合、IE との互換性を実現するために、 // ただし、IE は現在 IE11 を使用しているため、次の行をコメントアウトすることでマウス インタラクション効果を実現できるようです。 7/8/9 はサポートされていません。 // もちろん、 i = i window.event; を追加するのは正しいです。 ; } //マウスがウィンドウの外に移動したら、マウスを削除します 小さな四角い window.onmouseout = function() { Mouse.x = null; Mouse.y = null } //小さな四角形を描画し、小さな四角形は移動します (境界に触れると逆に動きます)、小さな四角形はマウスによって拘束されます var anime = window .requestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.setTimeout(i, 1000 /) 45) }; //各ブラウザでサポートされている requestAnimationFrame は異なりますが、各ブラウザの関数と互換性がありますdraw() { //キャンバスをクリアします context.clearRect(0, 0, W, H); ].concat (squares); //マウスの小さな正方形配列と他の小さな正方形配列を接続 (マージ) var x, v, A, B, z, y; // 正方形の属性テーブル: x, y, xa, ya,最大squares.forEach(function(i) { //小さな正方形の移動方向を実現 ix += i.xa; iy += i.ya; //小さな正方形の移動方向を制御//小さな正方形がウィンドウに到達したとき境界、反対方向に移動 i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); i.ya = i.ya * (iy > H || iy < 0 ? - 1:1); //fillRect の最初の 2 つのパラメータは長方形の左上隅の x、y 座標で、最後の 2 つはそれぞれ幅と高さです //小さな正方形を描画します context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); // w 内のすべての要素を走査します (let n = 0; n < w.length; n++) { x = w[n]; // x と i が同じオブジェクト インスタンスではない場合、 (i !== x && null の場合、x の xy 座標が存在します) !== xx && null !== xy) { x_diff = ix - xx; //i と x の x 座標の差 y_diff = iy - xy; //i と x の y 座標の差 = x_diff * x_diff + y_diff * y_diff; //斜辺の 2 乗 if (距離 < x.max) { //小さな正方形 i をマウスの小さな正方形でバインドします。つまり、小さな正方形 i とマウスの小さな正方形の間の距離が大きすぎる場合、小さな正方形 i は小さな正方形でバインドされます。マウスの // マウスを中心とした複数の小さな正方形が生成されます。mouse.max /2 は円を作るための半径です if (x === マウス && 距離 > x.max / 2) { ix = ix - 0.03 * x_diff; iy = iy - 0.03 * y_diff } A = (x.max - distance) / x.max; context.beginPath(); // 2 つの小さな正方形の間の距離に関連するブラシの線の太さを 0 ～ 0.5 の範囲で設定します。線は細くなり、最大値に達します。線を描くと線が消えます。 context.lineWidth = A / 2 //ブラシの線の色をキャンバスの色である sc に設定し、透明度を (A+0.2) に設定します。つまり、2 つの小さな正方形が離れるほど、線は明るくなります。 attr.color + , + (A + 0.2) + ); //i 番目の小さな正方形にブラシ ストロークを設定します context.moveTo(ix, iy) //x 番目の小さな正方形にブラシ ストロークを移動します context.lineTo(xx) , xy); // 線の描画、つまり小さな正方形を結ぶ線の描画を完了します。 } } } // w 配列から小さな正方形 i を削除します。 // 2 つの小さな正方形が繰り返し接続されるのを防ぎます。 w.splice(w.indexOf(i), 1)) // window.requestAnimationFrame は再帰呼び出しを形成します。 , //ただし、window.requestAnimationFrame はシステムの時間間隔を使用して最高の描画効率を維持し、アニメーションをよりスムーズにするためにより適切な最適化を提供します。//ブラウザーの最適化後、アニメーションはよりスムーズになります。 //ウィンドウがアクティブ化されていない場合、アニメーションは計算リソースを節約するために停止します; anime(draw) } //ここで、0.1 秒待った後、draw() を 1 回実行します。実際のアニメーション効果は window によって実装されます。 .requestAnimationFrame function() {draw()}, 100)} ();ソースコードアドレス: https://github.com/jc1144096387/canvas_nest
要約する上記は、エディターによって紹介された、バックグラウンドでのマウス接続の動的効果を実現するための HTML5 キャンバスを解析するためのコードです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。