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

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

1. 雨滴特殊効果の要件

雨滴はウィンドウの上から下に向かってランダムに落ち、波紋のように見えますが、徐々に広がって消えていきます。雨滴効果はウィンドウの変化に適応します。

2. レインドロップの実装アイデア

1. オブジェクト指向思考を使って、まずキャンバスを作成し、雨滴の最初の形を描きます。
2. 雨滴に動きを加える方法
3. タイマーを使って雨滴を動かす

3. 具体的な分析

1. 雨滴の初期化に必要なプロパティは何ですか?
座標 x、y 幅と高さ w、h。
2. 雨滴は一定の速度で落ちるのではなく、徐々に加速して落ちます。雨滴に加速属性を与える必要があります。つまり、y 軸の座標に加速値が常に加算されます。
3. 雨滴が底部の一定範囲まで落ちると、波紋が現れ始め、徐々に広がります。つまり、底部の一定範囲に達すると円を描き始め、徐々に大きく薄くなり、透明感が増します。
4. 落下する雨滴の尾を引く効果には、それまで動いていた雨滴を覆う影のレイヤーを描く必要がある。

4. コード

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

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

  キャンバス {
   垂直位置合わせ: 中央;
   背景: #000;
  }
 </スタイル>
</head>

<本文>
 <キャンバスid="myCanvas"></キャンバス>
 <スクリプト>
  // キャンバスを作成する let myCanvas = document.getElementById('myCanvas')
  ctx = myCanvas.getContext('2d') とします。
  // 適応型ウィンドウ let width = myCanvas.width = window.innerWidth
  高さを myCanvas.height = window.innerHeight とします。
  window.addEventListener('サイズ変更', () => {
   幅 = myCanvas.width = window.innerWidth
   高さ = myCanvas.height = window.innerHeight
  })
  // 雨滴を描く let raindropArr = []
  関数 Raindrop(x, y, w, h, l, r, dr, maxR, a, va) {
   this.x = rand(0, window.innerWidth) // 雨滴の x 軸this.y = y || 0 // 雨滴の y 軸this.dy = rand(2, 4) // 雨滴の加速度this.w = w || 2 // 雨滴の幅this.h = h || 10 // 雨滴の高さthis.l = rand(0.8 * height, 0.9 * height) // 雨滴の落下高さthis.r = r || 1 // 波紋の半径this.dr = dr || 1 // 波紋の増加半径this.maxR = maxR || 50 // 最大波紋の半径this.a = a || 1 // 波紋の透明度this.va = 0.96 // 波紋の透明度係数}
  Raindrop.prototype = {
   draw: function (index) { // 雨滴を描画する if (this.y > this.l) {
     ctx.beginPath()
     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
     ctx.strokeStyle = `rgba(0,191,255,${this.a})`
     ctx.ストローク()
    } それ以外 {
     ctx.fillStyle = 'スカイブルー'
     ctx.fillRect(this.x、this.y、this.w、this.h) は、矩形領域を塗りつぶします。
    }
    this.update(インデックス)
   },
   update: function (index) { // 雨滴の座標を更新して移動します if (this.y > this.l) {
     （this.a > 0.03）の場合{
      this.r += this.dr
      （this.r > this.maxR）の場合{
       this.a * = this.va
      }
     } それ以外 {
      これ.a = 0
      raindropArr.splice(インデックス、1)
     }
    } それ以外 {
     this.y += this.dy
    }
   }
  }
  関数rand(最小値, 最大値) {
   Math.random() * (max - min) + min を返します。
  }
  間隔を設定する(() => {
   raindrop = new Raindrop() とします。
   raindropArr.push(raindrop)
  }, 100)
  間隔を設定する(() => {
   ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
   ctx.fillRect(0, 0, myCanvas.width, myCanvas.height)
   (i = 0 とします; i < raindropArr.length; i++) {
    raindropArr[i].draw(i)
   }
  }, 30)
 </スクリプト>
</本文>

</html>

V. 結論

基本的に、キャンバスのあらゆる動きや特殊効果は、js タイマーを通じて座標を変更することによって実現されます。

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

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