雨滴の効果を達成するためのキャンバス

主なアイデア：

canvas要素を作成します。

注意：

すべてではないが、それは部分的にしか描くことができ、スクロールはライスペーパーの一部として絵のようなものだ、グラフィックスを描画するキャンバスの一部にすることができます。キャンバスキャンバスの幅と高さのローカル全体cnavasを埋めるために必要がある場合は、設定する必要があります。

キャンバスはインライン要素です。ラインは素子幅とブラウザの高さに等しい場合、ブラウザは、線要素が行の高さを有しているので、それはブロックレベル要素として設定することができ、バーが表示さをスクロールします。

デフォルトの幅と高さのキャンバス（300 * 150）
canvas要素を取得し、ブラウザウィンドウの幅と高さを超える高い広いキャンバスを提供します。
- ブラウザウィンドウに次の大きなを取得します（幅と高さ）
  
  window.innerWidth;
  
  window.innerHeight;
- ブラウザウィンドウの幅と高さも幅と高さのキャンバスを設定する必要が変更された場合。
  
  window.onresize =関数（）{};リスナーブラウザウィンドウの変更、変更ブラウザウィンドウ、ブラウザが実行取得方法ウィンドウサイズ、およびキャンバスに再割り当て。
実現には、グラフィックスを移動します。
- 下には、複数の静止画を再生します。フレーム（60）が1より大きい第2のスクリーン機能を実行するために、1/60秒の間隔で更新されています
背景色は白マスクで描く各正方形に追加します。

<！DOCTYPE HTML > 
< HTML LANG = "EN" >

< ヘッド> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =縁" > 
    < タイトル>キャンバス雨滴效果</ タイトル> 
    < スタイル> 
        本体{ 
            マージン：0 。
        }

        .rain { 
            表示：ブロック。
            背景色：＃000 ; 
        } 
    </ スタイル> 
</ ヘッド>

< ボディ> 
    < キャンバスクラス= "雨" > </ キャンバス> 
    < スクリプト> 
        // 1.取得および設定キャンバスのサイズ
        のvar キャンバス= document.querySelector（' .rain ' ）;
         VAR ctxWidth、ctxHeight; // キャンバスの定義幅高
        ~~ 関数setResize（）{ // リアルタイムキャンバスキャンバスの幅と高さに変更ブラウザウィンドウの変更、及びブラウザ一貫した
            window.onresize = arguments.calleeを。
            ctxWidth = window.innerWidth。
            ctxHeight = window.innerHeight。
            canvas.width = ctxWidth。
            canvas.height = ctxHeight。
        }（）;
        VAR CTX = canvas.getContext（' 2D ' ）。

        // 2. Drawは雨滴が単一雨滴雨に応じて次の処理対象を実行し、個々の雨滴を移動する
        / * VAR Y = 10。
        setInterval（関数（）{
            //、雨滴マスク、透明色を追加雨滴が徐々に透明効果を持っているように見えます作り上げます
            ctx.fillStyle = 'RGBA（0,0,0,0.05）'。
            ctx.fillRect（0、0、ctxWidth、ctxHeight）。
        
            //四角形小さな雨滴を描きます
            ctx.fillStyle = '青';
            ctx.fillRect（10、Y ++、4、10）。
        / 60}、1000）。* /

        関数ランダム（MIN、MAX）{ // minとmaxとの間の乱数から生成された
            リターンMath.random（）* （最大- 最小）+ 分。
        }

        // 3.オブジェクト雨滴
        関数レイン（）{}。
        Rain.prototype = {
            INIT：関数（）{
                 この.X = ランダム（0 、ctxWidth）;
                 この.Y =  0 ;
                 この.vY = ランダム（4 、5 ）; // のY軸移動における雨滴速度
                この.H = ランダム（0.8  * ctxHeight、0.9  * ctxHeightは）; // 雨滴のY軸位置は、キャンバス全体を停止した場合の高さの80％-90％
                この.Rの=  1 ; // 円の半径
                この.vR=  1 ; // 変速半径円形
            }
            ：描画機能を（）{
                 IF （この.Y <=  この.H）{
                     // 描画が小さい矩形雨滴
                    ctx.beginPathを（）;
                    ctx.fillStyle =  ' ＃31f7f7 ' ;
                    ctx.fillRect（この.X、この.Y、4 、10 ）。
                } 他{
                    ctx.beginPath（）;
                    ctx.strokeStyle =  ' ＃31f7f7 ' ;
                    ctx.arc（この.X、この.Y、この.R、0 、にMath.PI *  2 ）。
                    ctx.stroke（）;
                }
            }、
            移動：関数（）{
                 場合（この.Y <=  この.H）{
                     この.Y + =  この.vY。
                } 他{
                     場合（この.R <=  100 ）{
                         この.R + =  この; .vR
                    }
                    他{
                         この.INIT（）。
                    }
                }
                この.draw（）;
            }

        }

        // 雨滴の複数の関数を作成し、arrRainsのに雨滴プッシュ
        するvar arrRains = [];

        関数createRain（NUM）{
             // すべての200ミリ秒が生成雨滴ドロップ
            するための（VAR Iは=  0 ; I <= NUMと、I ++ ）{
                setTimeout（関数（）{
                     VARの雨=  新しいレイン（）。
                    rain.init（）;
                    rain.draw（）;
                    arrRains.push（雨）。
                }、200  * I）。
            }
        }

        createRain（50 ）。

        setInterval（関数（）{
             // 雨滴は、透明色をマスク追加は、そう緩やか透明度ルックアップがあると効果雨滴
            ctx.fillStyle =  「RGBA（0,0,0,0.05）を」;
            ctx.fillRect（0 、0 、ctxWidth、ctxHeight）。
            用（arrRainsのアイテム）{
                item.move（）;
            }
        } 1000  /  60 ）; // 関数を実行するために1/60秒毎
    </ スクリプト> 
</ ボディ>

</ HTML >

レンダリングは、静止画の一部を切断し、実際の効果は動的です。

雨滴の効果を達成するためのキャンバス

おすすめ