HTML5で雪の効果を実現する方法

キャンバスを使用して雪のエフェクトを作成しましょう:

まずこのエフェクトを分析してみましょう:

2. 雪の結晶は同時に生成されません。

3. 雪の結晶をどのように表現しますか

4. 雪はどのようにして降り続けるのですか

5. 雪の結晶は大きくても小さくても構いません

まず、この効果は次のとおりです。これは、キャンバスを動的に作成し、ブラウザ全体の幅と高さをキャンバスに割り当てます

var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement("canvas");
                    oC.setAttribute('width', this.width);
                    oC.setAttribute('height', this.height);
                    oC.setAttribute('id', 'canvas');
                    oC.style.backgroundColor = '#000';
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

。oCanvas オブジェクトの init メソッドを呼び出した後、キャンバスが末尾に追加されます。ボディはキャンバス、幅は 、高さはブラウザの幅と高さと同じ、背景は黒、夜の雪の効果です

次に、ステージでは、俳優の時間です。ステージに上がってください、雪の結晶を生成するにはどうすればよいですか?ここで、雪関連の操作はクラスにカプセル化されます。その基本構造は次のとおりです。

var Snow = function(){}
Snow.prototype = {
　　init : function(){},
　　draw : function( cxt ) {},
　　update : function(){}
}

このクラスには、合計 3 つのメソッド (init、draw、update) があります。

init: 雪の結晶の位置を初期化します (x)。 、y 座標)、速度、半径 (雪の結晶のサイズ。ここでは雪の結晶を表すために異なる半径の円を使用します)

function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                }

その後、init にこのランダム関数を加えて雪の結晶の初期化を完了できます

1 雪の結晶が出てくると、それらは雪の結晶になります。通常、画面の上部に表示されるため、雪の結晶の y 座標はすべて 0 になります。次に、雪の結晶の x 座標は、画面の左から右までランダムであるため、0 になります。 ~ width この幅は、ブラウザの幅です

2、雪の結晶の半径r、1〜5の任意の値に設定します

3、雪の結晶の落下速度は3〜5の間でランダムな速度に設定します。ここでは雪を垂直方向に降らせます。拡張して風の影響を考慮することができます（このとき水平方向の速度が必要です）

これらの初期化パラメータを使用すると、描画メソッドを改良して雪の結晶を描画します:

draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = 'white';
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },

パラメータ cxt はキャンバスのコンテキストで、この関数は最後に円 (雪の結晶) を描画するために init に設定された値を呼び出す非常に単純な関数です。このメソッドでは、update メソッドが呼び出され、何をするのでしょうか?雪の結晶の垂直方向の速度を更新します

update: function (cxt) {
                    if (this.y < height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }

更新メソッドでは、雪の結晶が下に落ちると必ず消えるという境界判断を行います。 消えた後はどうするか。国境に達していない場合はどうすればよいですか?

キャンバスの高さから雪の結晶の半径を引いたものです。これは雪の結晶が消えようとするときの境界であるため、 this.y

var snow = [];
            for (var i = 0; i < 500; i++) {
                setTimeout(function () {
                    var oSnow = new Snow();
                    oSnow.init();
                    snow.push(oSnow);
                }, 10 * i);
            }

同時にではなく 500 個の雪の結晶を生成し、これらの雪の結晶を配列 Snow に保存します。

その後、タイマーを開始して雪の結晶が降り続けるようにします

requestAnimationFrame の使用については、を参照してください。私の記事 記事: [JS Master's Road] HTML5 の新しいタイマー requestAnimationFrame 実際のプログレスバー

(function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i < snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();

完全なデモコード:

    
    
    
    
    
    



    <script>
        window.onload = function () {
            var Canvas = function (w, h) {
                this.width = w;
                this.height = h;
            }
            Canvas.prototype = {
                init: function () {
                    var oC = document.createElement(&quot;canvas&quot;);
                    oC.setAttribute(&amp;#39;width&amp;#39;, this.width);
                    oC.setAttribute(&amp;#39;height&amp;#39;, this.height);
                    oC.setAttribute(&amp;#39;id&amp;#39;, &amp;#39;canvas&amp;#39;);
                    oC.style.backgroundColor = &amp;#39;#000&amp;#39;;
                    document.body.appendChild(oC);
                }
            }
            var curWinWidth = window.innerWidth,
                curWinHeight = window.innerHeight;
            var oCanvas = new Canvas(curWinWidth, curWinHeight);
            oCanvas.init();

            var oC = document.querySelector(&#39;#canvas&#39;);
            var width = oC.width, height = oC.height, oGc = oC.getContext(&#39;2d&#39;);

            function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            var Snow = function () {

            }
            Snow.prototype = {
                init: function () {
                    this.x = random(0, width);
                    this.y = 0;
                    this.r = random(1, 5);
                    this.vy = random(3, 5);
                },
                draw: function (cxt) {
                    cxt.beginPath();
                    cxt.fillStyle = &amp;#39;white&amp;#39;;
                    cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);
                    cxt.fill();
                    cxt.closePath();
                    this.update(cxt);
                },
                update: function (cxt) {
                    if (this.y &lt; height - this.r) {
                        this.y += this.vy;
                    } else {
                        this.init();
                    }
                }
            }

            var snow = [];
            for (var i = 0; i &lt; 500; i++) {
                setTimeout(function () {
                    var oSnow = new Snow();
                    oSnow.init();
                    snow.push(oSnow);
                }, 10 * i);
            }

            (function move() {
                oGc.clearRect(0, 0, width, height);
                for (var i = 0; i &lt; snow.length; i++) {
                    snow[i].draw(oGc);
                }
                requestAnimationFrame(move);
            })();
        }
    </script>

以上がHTML5で雪の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。