HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果（ソースコードは最後にあります）：

ここに画像の説明を挿入

成し遂げる：

1. タグを定義します。

 <h1>オーロラの夜</h1>
 <canvas id="draw" style=" position: fixed; display: block;">  
			現在のブラウザは Canvas をサポートしていません。ブラウザを変更してもう一度お試しください</canvas>

2. 基本的なテキストスタイル:

h1{
   位置: 絶対;
   上位: 50%;
   左: 50%;
   変換: translate(-50%,-50%);
   フォントサイズ: 5em;
   フォントファミリー: 'fangsong';
   色: rgb(38, 205, 247);
  }

上位: 50%;
左: 50%;
transform: translate(-50%,-50%); 中央揃え
3. js 部分の詳細についてはコメントを参照してください。

<スクリプト>
  /* まずキャンバスを取得します */
  var キャンバス = document.querySelector("#draw");
  var yuan = canvas.getContext("2d");  
  /* ウィンドウサイズ変更イベントをバインドして、キャンバスがいつでもブラウザの表示領域を埋めることができるようにします*/
   ウィンドウをサイズ変更します。
  関数 resizeCanvas(){
   キャンバスの幅=ウィンドウの内側の幅;
   キャンバスの高さ=ウィンドウの内側の高さ;
  }
  キャンバスのサイズを変更します。 

  /* 移動イベントがトリガーされたときに生成される小さな円を格納する配列を以下で定義します*/
  var arr = [];
  
  /* 小さな円を描く方法、x と y は初期位置、r は円の半径です */
  関数円 (x,y,r){
   .x = x;
   y = y;
   r = r;
   /* ランダムな色を取得します */
   this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
   /* 円の移動方向。ランダム関数は 0.0 から 1.0 の間の乱数を返します。x はランダムな正または負の数、y はランダムな正の数です。*/
   this.xZou = parseInt(Math.random()*10-5);
   this.yZou = parseInt(Math.random()*10);  
   /* この要素を arr 配列の末尾に追加します */ 
   arr.push(これを);
  }

  /* 円を更新するメソッド */
   円.プロトタイプ.更新 = 関数() {
    /* x と y が増加し、円形を形成します */
   this.x = this.x + this.xZou;
   this.y = this.y + this.yZou;
   /* 半径はゆっくりと減少します*/
   this.r = this.r - 0.1 ;
   /* 半径が 1 未満の場合は円をクリアします */
   if(this.r<0){
    これを削除してください。
   }
   }
   /* 小さい円の機能を削除します*/
   サークルプロトタイプ削除 = 関数 (){
    /* 配列を走査し、この関数を呼び出したのと同じ円を見つけ、スプライス関数を使用してそれを削除します*/
   for(let i=0;i<arr.length;i++){
     if(this==arr[i])
     {
      arr.splice(i,1);
     }
   }
  }
   /* 小さな円をレンダリングします */
   円.プロトタイプ.レンダリング = 関数(){

   yuan.beginPath();
   yuan.arc(this.x,this.y,this.r,0,2*3.14,false);
   yuan.fillStyle = this.color;
   yuan.fill();
   }
   /* マウスオーバーイベントをキャンバスにバインドします */  
   canvas.addEventListener('mousemove',function(e){
    /* x、y、rを渡します。 offsetX 左側からの距離、..、*/
   新しい円(e.offsetX、e.offsetY、Math.random()*15); 
   })

    /* タイマーは 30 ミリ秒ごとに小さな円をレンダリングし、アニメーションを開始します */
   setInterval(関数(){
     /* 画面をクリア */
    yuan.clearRect(0,0,canvas.width,canvas.height);
    /* 配列をループして各円を更新してレンダリングします*/
    for(let i=0;i<arr.length;i++){
     /* 更新*/
     arr[i].更新されました();
     /* ブラウザがサポートしている場合はレンダリングします */
     （arr[i].render()）の場合{
      arr[i].render();
     }
     
    }

   },30)

 </スクリプト>

キャンバスリンク
splice() メソッドの連鎖
random() メソッドの連鎖
push() メソッドの連鎖
イベントリンクのサイズ変更

完全なソースコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <スタイル>
  *{
   マージン: 0;
   パディング: 0;
   ボックスのサイズ: 境界線ボックス;
  }
  
  体{
   背景色: rgb(72, 75, 122);
  }
  
  h1{
   位置: 絶対;
   上位: 50%;
   左: 50%;
   変換: translate(-50%,-50%);
   フォントサイズ: 5em;
   フォントファミリー: 'fangsong';
   色: rgb(38, 205, 247);
  }
  
 </スタイル>
</head>
<本文>
 
  <h1>オーロラの夜</h1>

 <canvas id="draw" style=" position: fixed; display: block;">  
			現在のブラウザは Canvas をサポートしていません。ブラウザを変更してもう一度お試しください</canvas>

 <スクリプト>
  /* まずキャンバスを取得します */
  var キャンバス = document.querySelector("#draw");
  var yuan = canvas.getContext("2d");  
  /* ウィンドウサイズ変更イベントをバインドして、キャンバスがいつでもブラウザの表示領域を埋めることができるようにします*/
   ウィンドウをサイズ変更します。
  関数 resizeCanvas(){
   キャンバスの幅=ウィンドウの内側の幅;
   キャンバスの高さ=ウィンドウの内側の高さ;
  }
  キャンバスのサイズを変更します。 

  /* 移動イベントがトリガーされたときに生成される小さな円を格納する配列を以下で定義します*/
  var arr = [];
  
  /* 小さな円を描く方法、x と y は初期位置、r は円の半径です */
  関数円 (x,y,r){
   .x = x;
   y = y;
   r = r;
   /* ランダムな色を取得します */
   this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
   /* 円の移動方向。ランダム関数は 0.0 から 1.0 の間の乱数を返します。x はランダムな正または負の数、y はランダムな正の数です。*/
   this.xZou = parseInt(Math.random()*10-5);
   this.yZou = parseInt(Math.random()*10);  
   /* この要素を arr 配列の末尾に追加します */ 
   arr.push(これを);
  }

  /* 円を更新するメソッド */
   サークルプロトタイプ更新 = 関数() {
    /* x と y が増加し、円形を形成します */
   this.x = this.x + this.xZou;
   this.y = this.y + this.yZou;
   /* 半径はゆっくりと減少します*/
   this.r = this.r - 0.1 ;
   /* 半径が 1 未満の場合は円をクリアします */
   r<0の場合
    これを削除してください。
   }
   }
   /* 小さい円の機能を削除します*/
   サークルプロトタイプ削除 = 関数 (){
    /* 配列を走査し、この関数を呼び出したのと同じ円を見つけ、スプライス関数を使用してそれを削除します*/
   for(let i=0;i<arr.length;i++){
     if(this==arr[i])
     {
      arr.splice(i,1);
     }
   }
  }
   /* 小さな円をレンダリングします */
   円.プロトタイプ.レンダリング = 関数(){

   yuan.beginPath();
   yuan.arc(this.x,this.y,this.r,0,2*3.14,false);
   yuan.fillStyle = this.color;
   yuan.fill();
   }
   /* マウスオーバーイベントをキャンバスにバインドします */  
   canvas.addEventListener('mousemove',function(e){
    /* x、y、rを渡します。 offsetX 左側からの距離、..、*/
   新しい円(e.offsetX、e.offsetY、Math.random()*15); 
   })

    /* タイマーは 30 ミリ秒ごとに小さな円をレンダリングし、アニメーションを開始します */
   setInterval(関数(){
     /* 画面をクリア */
    yuan.clearRect(0,0,canvas.width,canvas.height);
    /* 配列をループして各円を更新してレンダリングします*/
    for(let i=0;i<arr.length;i++){
     /* 更新*/
     arr[i].更新されました();
     /* ブラウザがサポートしている場合はレンダリングします */
     （arr[i].render()）の場合{
      arr[i].render();
     }
     
    }

   },30)

 </スクリプト>
</本文>
</html>

他の：

今日の3つの自己分析: 快適な生活は退屈です。挑戦と勝利の達成に満ちた人生こそが人生の真の意味です。

これで、HTML+CSS+JS を使用したマウスに追従するキャンバスの小さな円の特殊効果のソースコードに関するこの記事は終了です。マウスに追従するキャンバスの小さな円の特殊効果に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません: