雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

まずは効果を確認

見た目はとてもクールですが、実際に雨粒の落下と最後の円を実現しています。

あるいはソースコードを見てください

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }

        体 {
            背景色: #000;
        }
    </スタイル>
</head>

<本文>
    <キャンバス></キャンバス>
    <スクリプト>
        // キャンバスを取得する var canvas = document.querySelector('canvas')
        // ブラシを取得する var ctx = canvas.getContext('2d')
        // CSS を使用してキャンバスのサイズを変更することはできません var ch = canvas.height = window.innerHeight
        var cw = キャンバス.幅 = ウィンドウ.インナー幅
        // 雨滴を放出する var arrRain = []
        // 画面サイズを監視し、それに応じてキャンバスのサイズを変更します。window.onresize = function () {
            ch = キャンバスの高さ = ウィンドウの内側の高さ
            cw = キャンバス.幅 = ウィンドウ.内側の幅
        }
        // ランダムな雨滴を生成するために乱数を取得します。 function randow(min, max) {
            Math.random() * (max - min) + min を返します。
        }
        // コンストラクタ関数 Rain() {

        }
        // rainにプロパティとメソッドを追加します Rain.prototype = {
            // 雨滴が落ちる円の位置と半径を初期化する init: function () {
                this.x = ランダム(0, cw)
                y = 0 です
                // 雨滴が最終的に地面に着地する距離は画面を超えることはできません this.h = randow(0.8 * ch, 0.9 * ch)
                this.r = 1 // 円の開始半径 this.vr = 1 // 半径が大きくなる速度 this.vy = randow(4, 5)

            },
            // 描画メソッドdraw: function() {
                // h未満の場合は雨滴と四角形を描画します if (this.y < this.h) {
                    ctx.beginPath()
                    ctx.fillStyle = '白'
                    ctx.fillRect(this.x, this.y, 4, 10)
                } それ以外 {
                    // 円を描く ctx.beginPath()
                    ctx.strokeStyle = '白'
                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
                    ctx.ストローク()
                }
            },
            //雨滴の動き move: function () {
                // h より小さい場合は y を追加して雨滴を動かします if (this.y < this.h) {
                    this.y += this.vy
                } それ以外 {
                    // 水しぶきの効果を実現する if (this.r < 70) {
                        this.r += this.vr
                    } それ以外 {
                        // エフェクト終了後に初期化して空から雨滴を生成するので、init関数を呼び出します this.init()
                    }
                }
                this.draw()
            }
        }
        // 雨滴を生成する function createRain(num) {
            (var i = 0; i < num; i++) の場合 {
                // 雨滴を同時にではなくランダムに生成する setTimeout(function () {
                    var rain = 新しい Rain()
                    雨.init()
                    雨.描画()
                    arrRain.push(雨)
                }, 300 * i)
            }
        }
        雨を作る(60)
        setInterval(関数() {
            ctx.beginPath()
            ctx.fillStyle = 'rgba(0,0,0,0.05)'
            ctx.fillRect(0, 0, cw, ch)
            (arrRainのvar k) {
                k.移動()
            }
        }, 1000 / 80)
    </スクリプト>
</本文>

</html>

これらは Raindrops によって実装されたソースコードであり、参考用です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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