特別な効果を達成落ちる雨粒のキャンバスエントリーレベルの基本的な使い方

直接コードのドキュメントを参照キャンバス基本的な知識、非常に詳細なメモ

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル>キャンバス雨滴特效</ タイトル> 
        < スタイル> 
            ボディ{ 
                マージン：0 ; 
                オーバーフロー：隠されました; 
            } 
            #rain { 
                表示：ブロック。
                背景色：＃000 ; 
            }
        </ スタイル> 
    </ ヘッド> 
    < 身体> 
        < キャンバスのIDは= "雨" > </ キャンバス> 

        < スクリプト> 
            // 取得canvas要素の
            constがキャンバス= document.querySelector（' #rain ' ）;
             // canvas要素の幅を設定します。高機能
            のvar WX、WY;
             ~~ 関数のsetSize（）{
                 // モニタウィンドウ関数のsetSizeの変更はときに自動的に呼び出される
                window.onresize = arguments.calleeを;
                 //ブラウザウィンドウの幅と高さを取得
                WX = window.innerWidth; 
                WY = window.innerHeight;
                 // 幅と高さのキャンバスセットに
                canvas.width = WX; 
                canvas.height = WYを; 
            }（）; 
            // （描画領域ブラシに対応し得ます、どこでもキャンバスのグラフィックスレンダリングに）することができる
            VAR CTX = canvas.getContext（' 2D ' ）; 

            // 乱数は、二つの間の乱数生成
            関数ランダム（MIN、MAX）を{
                 返す）（Math.randomを* （MAX - 分）+ 分。
            } 
            // 生成された雨滴コンストラクタ
            関数レイン（）{};
             //はプロトタイピング追加
            Rain.prototype = { 
                INIT：関数（）{
                     この.X = ランダム（0 ;、WX）// 雨滴が横軸
                    この.Yを=  0 ; // の上部から落下する雨滴の縦デフォルト
                    この.V = ランダム（3 、4 ）; // 当たり雨滴落下速度
                    この.H = ランダム（0.9 * WY、ワイオミング州）。// の高さの100％にウィンドウ90のドロップ
                    この.R =  1 ; // の初期半径ブルーミング雨滴
                    この.vr =  0.4 ; // 半径方向の膨張速度
                }、
                描画：関数（）{
                     IF （この.Y < 本.H）{ //は90間の％〜100％か否かを判断
                        ctx.beginPath（）;                     // PENUP塗料
                        ctx.fillStyle =  ' ＃666 ' ;              // 概要塗りつぶしの色
                        ctx.fillRect（この.X、この.Y、4。 、8。）;     // 矩形小さな雨滴描画
                    } 他に{ // 以下のセクションに分類されない円に開花する
                        ctx.beginPath（）; 
                        ctx.strokeStyle =  ' ＃ 666 ' ; 
                        ctx.arc（この.X、この.Y、この.R、0 、にMath.PI * 2 ）; 
                        ctx.stroke（）; 
                    } 
                }、
                ：移動 
                        }関数（）{
                     IF （この.Y < 本.H）{ // ドロップ
                        この.Yを+ = この.V; // から3-4毎秒低下ドロップ
                    } 他{ // 円にブルーム
                        IF （本。 R＆LT < 35 ）{
                             この.R + = この.vr; 
                        } 他{
                             この.INIT（）; 
                    } 
                    この.draw（）; //移動雨滴が描画
                } 
            } 

            // 生成されたアニメーションは、雨滴の便宜のために配列中に存在することが見出さ追加する
            VARのArain = [];
             // 関数の雨滴の作成
            関数{createRain（NUM）
                 のための（VARのI = 0 ;私は< NUMと、I ++ ）{ 
                    たsetTimeout（関数（）{ // 200ms毎生成する
                        VARの雨=  新しい新しいレインを（）; 
                        rain.init（）。
                        rain.draw（）; 
                        aRain.push（雨）; 
                    } 200である*I）
                } 
            } 
            createRain（50 ）; 

            // 形成タイマビデオアニメーションフレーム
            のsetIntervalを（関数（）{
                 // ctx.clearRect（0,0、WX、WY）; //パターンを消去する（雪感じる）
                // この効果は雨滴Jiamengバージョンがグラデーション達成消去されていません
                ctx.fillStyleは=  ' RGBA（0,0,0,0.05）を' ; 
                ctx.fillRect（0 、0 、WX、WY）;
                 のため（VARアイテムのArain）{ 
                    item.move（）; 
                } 
            }、1000 /144）; // 自分の画面に基づいてリフレッシュレート（ここでは、144ヘルツ）
            
        </ スクリプト> 
    </ ボディ> 
</ HTML >

 

私のオリジナルコンテンツ、不適切な私を許してください！私を修正してください！ソースは、リンクを添付して記入してください、ありがとうございました！