JSパッケージのcanvasバブルアニメーション

の原因となる
最近、いくつかの動効の多い可視化ページを実現するには、気泡生成のアニメーションが必要で、このコードを書きました.
ろんり
まずcanvas domを入力し、その幅を取得し、初期化は特定の長さの気泡配列(長さは外部から入力可能)を宣言し、各気泡には半径、速度、初期化位置などの属性がある.次に、描画方法を実行し、毎回描画前にclearRect()を呼び出してキャンバスを空にし、window.requestAnimationFrame()ループは描画方法を呼び出します.気泡の初期化を描画する際には、位置をランダムにすることもできるし、すべて底部で生成することもできる.気泡の高さ位置が変化するたびに、キャンバスの上部に達すると、再び下部から現れます.
コード#コード#

class BubbleAnimate {
    constructor(canvas, number=20,radius=6,color=[255,255,255],speed=0.2,speedRandomPercent=0.5,startFull=true) {
        try{
            this.canvas = canvas;
        }catch{
            throw("please provide canvas dom"); 
            return ;
        }
        this.ctx = canvas.getContext('2d');
        this.width=canvas.width;
        this.height=canvas.height;
        this.radius=radius;
        this.color=color;
        this.speed=speed;
        this.bubbles = [];
        this.speedRandomPercent=speedRandomPercent;
        this.startFull=startFull;
        for(let i=0; i this.renderCanvas());
    };
    renderBubbles() {
        //  
        let initPoint = [this.width/2,this.height];
        for(let i = 0;i

プレゼンテーションアドレス
プレゼンテーションアドレス
コードアドレス
コードアドレス
効果