数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

定数キャンバス = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
キャンバスの幅 = ウィンドウの内側の幅;
キャンバスの高さ = ウィンドウの内側の高さ;
関数drawCircle() {
 ctx.beginPath();
 ctx.fillStyle = '青';
 ctx.arc(10, 10, 10, 0, Math.PI * 2);
 ctx.fill();
 ctx.closePath();
}
円を描画します。

定数マウス = {};
キャンバス.addEventListener('mousemove', (e) => {
 マウスx = ex;
 マウスのyキーを押します。
});
キャンバス.addEventListener('クリック', (e) => {
 マウスx = ex;
 マウスのyキーを押します。
});
キャンバス.addEventListener('マウスアウト', () => {
 mouse.x = mouse.y = 未定義;
});
関数drawCircle() {
 ctx.beginPath();
 ctx.fillStyle = '青';
 ctx.arc(mouse.x, mouse.y, 10, 0, Math.PI * 2);
 ctx.fill();
 ctx.closePath();
}
関数アニメーション() {
 ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
 円を描画します。
 アニメーションフレームをリクエストします(アニメーション化します);
}
アニメーション化();

定数マウス = {};
// マウスをクリックまたは移動したときに新しいパーティクルオブジェクトを配列に追加します。 function addNewParticles(e) {
 マウスx = ex;
 マウスのyキーを押します。
 配列.apply(null, { 長さ: 2 }).forEach(() => {
  パーティクルを新しいパーティクル()にプッシュします。
 });
}
キャンバスにEventListenerを追加します('mousemove'、新しいパーティクルを追加します);
キャンバスにEventListenerを追加します('click'、新しいパーティクルを追加します);
const 粒子配列 = [];
クラス粒子{
 コンストラクタ() {
  マウスをダブルクリックします。
  マウスのy座標を計算
  this.size = Math.random() * 5 + 1;
  this.speedX = Math.random() * 3 - 1.5; // -1.5 ~ 1.5 で、負の数の場合は左に移動し、正の数の場合は右に移動します。speedY についても同様です。 this.speedY = Math.random() * 3 - 1.5;
 }
 アップデート（） {
  this.size -= 0.1; // 円の半径が徐々に減少します this.x += this.speedX; // 円の座標を更新します this.y += this.speedY;
 }
 描く（） {
  ctx.beginPath();
  ctx.fillStyle = '#fff';
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
 }
}
関数handleParticles() {
 (i = 0 とします; i < particlesArray.length; i++) {
  パーティクルアレイ[i]を更新します。
  パーティクルアレイ[i].draw();
  if (particlesArray[i].size <= 0.3) { // 半径が小さすぎる粒子を削除します。particlesArray.splice(i, 1);
   私 - ;
  }
 }
}
関数アニメーション() {
 パーティクルを処理します。
 アニメーションフレームをリクエストします(アニメーション化します);
}
アニメーション化();

let hue = 0; // 色相......
クラス粒子{
 ......
 描く（） {
  ctx.beginPath();
  ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
 }
}
関数handleParticles() {
 ......
}
関数アニメーション() {
    色相++;
    パーティクルを処理します。
    アニメーションフレームをリクエストします(アニメーション化します);
 
}
アニメーション化();

関数アニメーション() {
 // ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
 ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
 ctx.fillRect(0, 0, キャンバスの幅、キャンバスの高さ);
 色相++;
 パーティクルを処理します。
 アニメーションフレームをリクエストします(アニメーション化します);
}

関数handleParticles() {
 (i = 0 とします; i < particlesArray.length; i++) {
  パーティクルアレイ[i]を更新します。
  パーティクルアレイ[i].draw();
  // 現在の粒子から始めて、次の粒子を走査し、対応する距離を 1 つずつ計算します。for (let j = i + 1; j < particlesArray.length; j++) {
   定数dx = 粒子配列[i].x - 粒子配列[j].x;
   定数dy = particlesArray[i].y - particlesArray[j].y;
   const distance = Math.sqrt(dx * dx + dy * dy); // 中学校の知識if (distance < 100) { // 距離が大きすぎて破棄できません。そうしないと視覚効果が悪くなります// 直線を描画しますctx.beginPath();
    ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.moveTo(粒子配列[i].x、粒子配列[i].y);
    ctx.lineTo(粒子配列[j].x、粒子配列[j].y);
    ctx.stroke();
    ctx.closePath();
   }
  }
  （粒子配列[i].サイズ<= 0.3）の場合{
   粒子配列.splice(i, 1);
   私 - ;
  }
 }
}