ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

導入

このエフェクトは Canvas で描画され、クラス継承を使用して実装されます。マウスが指定された Canvas の位置に移動すると、現在のマウスの位置にランダムな色の小さなボールが生成され、その後ボールがゆっくりと消えていきます。

効果図

実装手順

HTML の記述
キャンバス環境を作成する
ライティングボール
Ballクラスを継承するMoveBallクラスを実装する
ボールをインスタンス化する

HTML構造

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>美しいボール</title>
    <スタイル>
        ＃キャンバス{
            左余白: 100px
        }
    </スタイル>
</head>
<本文>
    <canvas id="canvas">お使いのブラウザはキャンバスをサポートしていません</canvas>

    <!-- <script src="./underscore-min.js"></script> -->
    <!-- Underscore にはすでに _.random 関数がパッケージ化されています。これをインポートして手動でランダム関数を書く必要はありません。 -->
    <script src="./index.js"></script>
</本文>
</html>

キャンバス環境を作成する

 // インデックス.js
 
 // 1. 現在のキャンバスを取得します。const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
  
 // キャンバスのサイズスタイルを設定します。canvas.width = 1000;
 キャンバスの高さ = 600;
 キャンバス.スタイル.背景色 = '#000'

分析例

まず、キャンバス要素を見つけます。

定数キャンバス = document.getElementById("myCanvas");

次に、コンテキストオブジェクトを作成します。

const ctx = canvas.getContext('2d');

幅と高さの背景色を設定する

ライティングボール

// インデックス.js

 // 2. ボールクラス class Ball {
     コンストラクタ (x, y, 色) {
         this.x = x; // x軸 this.y = y; // y軸 this.color = color; // ボールの色 this.r = 40; // ボールの半径 }
 
     // ボールを描画する render () {
         ctx.save();
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
         ctx.fillStyle = this.color;
         ctx.fill();
         ctx.restore();
     }
 }

分析例

構築メソッドであるconstructor() メソッドがあり、this キーワードがインスタンスオブジェクトを表していることがわかります。
save() ---- 環境の現在の状態を保存する
beginPath() ---- パスを開始するか、現在のパスをリセットします
arc() ---- 円弧/曲線を作成するために使用します (円または部分円を作成するために使用します) -- パラメータは次のとおりです

パラメータ	説明する
x	円の中心の x 座標。
ええ	円の中心の y 座標。
r	円の半径。
角度	開始角度（ラジアン単位）（円弧の 3 時の位置は 0 度です）。
eアングル	終了角度（ラジアン単位）。
反時計回り	オプション。描画を反時計回りにするか時計回りにするかを指定します。 False = 時計回り、True = 反時計回り。

fillStyle() ---- ペイントを塗りつぶすために使用される色、グラデーション、またはパターンを設定または返します。
fill() ---- 現在の描画（パス）を塗りつぶします
restore() ---- 以前に保存したパスの状態とプロパティを返します。

Ballクラスを継承するMoveBallクラスを実装する

// インデックス.js

// 3. ボールを動かすクラス class MoveBall extends Ball { // コンストラクタ (x, y, color) を継承します {
        スーパー(x, y, 色);

        // 数量の変化 // ボールのランダム座標 this.dX = Random(-5, 5);
        this.dY = ランダム(-5, 5);
        // ボールは最初は大きく、その後ゆっくりと消えていくため、半径を減少させるための乱数 this.dR = Random(1, 3);
    }

    // 4. ボールの位置と半径を変更する upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // ボールの半径が0未満かどうかを判定する
        0 の場合
            this.r = 0 // 半径が 0 の場合、ボールは消えます}
    }
}

分析例

ここでは MoveBall クラスが定義されており、extends キーワードを通じて Ball クラスのすべてのプロパティとメソッドを継承します。
ここでは親クラスのコンストラクターを表す super キーワードは、親クラスの新しい this オブジェクトを作成するために使用されます。サブクラスはコンストラクターメソッドでスーパーメソッドを呼び出す必要があります。そうしないと、新しいインスタンスを作成するときにエラーが報告されます。これは、サブクラス独自の this オブジェクトが、まず親クラスのコンストラクターによって形成され、親クラスと同じインスタンスプロパティとメソッドが取得され、その後、サブクラス独自のインスタンスプロパティとメソッドで処理および追加される必要があるためです。スーパーメソッドが呼び出されない場合、サブクラスは this オブジェクトを取得しません。（詳細はこちら）
upDateメソッドの目的は、ボールの位置と半径を変更し、マウスの位置に応じて異なる変更を加えることです。

ボールをインスタンス化する

// インデックス.js

// 5. ボールをインスタンス化する // 生成されたボールを保存する let ballArr = [];

// ランダム関数を定義する underscore-min.js を参照する場合は、ランダム関数を書く必要はなく、_.random を直接使用できます。
ランダム = (最小値, 最大値) => {
    Math.floor(Math.random() * (max - min) + min) を返します。
}

// マウスの動きをリッスンする canvas.addEventListener('mousemove', function (e){
    // ランダムな色 // 固定の色の配列を使用することもできます let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})` とします。
    ballArr.push(新しいMoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ballArr);
})

// タイマーを開始する setInterval(function () {

    // 画面をクリアします ctx.clearRect(0, 0, canvas.width, canvas.height);

    // ボールを描画します for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ボールArr[i].upDate();
    }
}, 50);

分析例

ランダムな色を生成するためのランダム関数を書いた
マウスの動きを聞いて動くボールを作成し、ボールを格納する配列にプッシュします。このように、配列内のボールにはレンダリングメソッドと更新メソッドがあります。最後に、Ball クラスの render メソッドを順番に呼び出して描画し、MoveBall の update メソッドを呼び出します。効果が出てきました！
clearRect クリア操作 ---- 指定された四角形内の指定されたピクセルをクリアします (詳細についてはクリックしてください)。画面をクリアしない場合の効果については、下の図を参照してください。

画面をクリアしないボールの半径が徐々に小さくなっていることがわかりますが、ボールは最終的に消えません。これは間違いなく私たちが望んでいる効果ではありません。画面をクリアするとどのような効果がありますか?記事冒頭のエフェクトです！（ベイビー、楽しんでね❤）

index.js の完全なコード

// 1. 現在のキャンバスを取得します。const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// キャンバスのサイズスタイルを設定します。canvas.width = 1000;
キャンバスの高さ = 600;
キャンバス.スタイル.背景色 = '#000'

// 2. ボールクラス class Ball {
    コンストラクタ (x, y, 色) {
        this.x = x;
        y = y;
        this.color = 色;
        r = 40; を出力します。
    }

    // ボールを描画する render () {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.restore();
    }

}

// 3. ボールを動かすクラス class MoveBall extends Ball { // コンストラクタ (x, y, color) を継承します {
        スーパー(x, y, 色);

        // 数量の変化 // ボールのランダム座標 this.dX = Random(-5, 5);
        this.dY = ランダム(-5, 5);
        // 半径が小さい乱数 this.dR = Random(1, 3);
    }

    // 4. ボールの位置と半径を変更する upDate () {
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;
        // ボールの半径が0未満かどうかを判定する
        0 の場合
            .r = 0 です
        }
    }

}

// 5. ボールをインスタンス化する // 生成されたボールを保存する let ballArr = [];

// ランダム関数を定義する underscore-min.js を参照する場合は、ランダム関数を書く必要はなく、_.random を直接使用できます。
ランダム = (最小値, 最大値) => {
    Math.floor(Math.random() * (max - min) + min) を返します。
}

// マウスの動きをリッスンする canvas.addEventListener('mousemove', function (e){
    // ランダムな色 // 固定の色の配列を使用することもできます let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
    // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
    bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})` とします。
    ballArr.push(新しいMoveBall(e.offsetX, e.offsetY, bgColor));
    console.log(ボールArr);
})

// タイマーを開始する setInterval(function () {

    // 画面をクリアします ctx.clearRect(0, 0, canvas.width, canvas.height);

    // ボールを描画します for (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ボールArr[i].upDate();
    }
}, 50);

要約する

この小さなデモが、ES6 のクラスの理解と使用方法をよりよく理解するのに役立つことを願っています。 ES6 クラス継承を使用してゴージャスな小さなボールの効果を実現する方法についてのこの記事はこれで終わりです。 ES6 クラス継承を使用して小さなボールを実現することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

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