js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有しています。具体的な内容は次のとおりです。

序文

Canvas はフロントエンドの特殊効果アートを実現します

結果

コード

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<本文>
    <script src="./main.js"></script>
</本文>
</html>

メイン.js

/*          
*パーティクルクラスの構造* クラス機能:
    *1. 初期化。キャンバスを作成し、パーティクルのプロパティなどを指定します。
    *2. 画像を作成して描画する *3. 領域の色を定義する *4. 粒子の動きと偏向角度 */

// 粒子を生成する let Particle = function(context, options){
    ランダム = Math.random();
    this.context = コンテキスト;
    // キャンバス内の x 座標 this.x = options.x;
    // キャンバス上の y 座標 this.y = options.y;
    // 乱数の 1/2 を取り、角度をランダムに拡大します。this.s = 0.5 + Math.random();
    // this.s = 1 + Math.random();
    // 粒子の動きの変化する角度 this.a = 0;
    // 幅 this.w = window.innerWidth;
    // 高さ this.h = window.innerHeight;
    // 半径 this.radius = options.radius || 0.5 + Math.random() * 10;
    // 色 this.color = options.color || "#E5483F";
    // コンソールにログ出力します。
    //3秒後に呼び出すように指定します。
    // パーティクルの半径が 0.5 より大きい場合は、新しいパーティクルを追加します。
    setTimeout(関数(){
        （この半径＞0.5）の場合{
            粒子.push(
                新しいパーティクル(コンテキスト、{
                  x: this.x,
                  y: これ.y,
                  色: this.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",
                  半径: this.radius / 2.2 })
            );
        }
    }.call(パーティクル), 3000);
};

// 画像をレンダリングする Particle.prototype.render = function() {
        //(0,0)から新しいパスを開始します。
        このコンテキストのbeginPath();
        // 曲線の円弧を作成します。this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        // 線の幅を描画します this.context.lineWidth = 2;
        // 色の塗りつぶし this.context.fillStyle = this.color;
        // 現在の画像のパスを入力します this.context.fill();
        // 初期点に戻り、初期位置まで線を描画します this.context.closePath();
};

Particle.prototype.swapColor = 関数() {
    // 白を除外 if (this.color != "#FFFFFF") {
        // 左右のインターフェースを決定し、色の値を割り当てる if (this.x < this.w / 2) {
            // 左半分 this.color = "#36fcfa";            
        } それ以外 {
            // 右半分 this.color = "#E5483F";            
        }
        }
    
};

Particle.prototype.move = 関数() {
    // 色の定義 this.swapColor();

    // 水平軸はコサイン角に応じて変換され、乱数によって増幅されます。
    // 2 つの半分の境界が分離されるように偏向角度を設定します this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;

    // this.y += Math.cos(this.a) * this.s;
    // this.x += Math.sin(this.a) * this.s;
    // 変更後、ランダムな角度を再度取得します。
    this.a += Math.random() * 0.8 - 0.4;

    // すべてが 0 の場合、パーティクルの水平座標は移動しません。
    (this.x < 0 || this.x > this.w - this.radius) の場合 {
      false を返します。
    }
    // 粒子の縦座標は移動しません。
    this.y < 0 || this.y > this.h - this.radius の場合 {
      false を返します。
    }

    // 画像を再描画します this.render();

    true を返します。  
};


キャンバスを document.createElement('キャンバス') にします。
キャンバスの幅 = ウィンドウの内側の幅 - 20;
キャンバスの高さ = ウィンドウの内側の高さ - 30;
document.body.insertBefore(キャンバス、null);
コンテキストを canvas.getContext('2d') にします。

定数conf = {
    頻度: 50,
    x: キャンバスの幅、
    y: キャンバスの高さ
};

粒子を [] とすると、
    頻度 = conf.frequency;

setInterval(関数(){
    ポピュレート();
}.bind(null)、頻度;

関数popolate(){
    粒子.push(
        新しいパーティクル(コンテキスト、{
          x: conf.x / 2、
          y:conf.y/2
        })
    );

    particles.length を返します。
}

関数クリア() {
    コンテキスト.globalAlpha = 0.04;
    コンテキスト.fillStyle = '#000042';
    context.fillRect(0,0,キャンバスの幅、キャンバスの高さ);
    コンテキスト.globalAlpha = 1;
}

関数更新(){
    粒子 = particles.filter(p => p.move());
    クリア（）;
    アニメーションフレームをリクエストします(引数.callee);
}

アップデート（）;

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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