キャンバス「マトリックス」デジタルレインエフェクト

効果は図の通りです

[外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-WWG3o0lo-1612685028038)(http://gcchen.cn/upload/rain.gif) )]

アニメーションの読み込みに時間がかかる場合があります。効果を確認するにはここをクリックしてください

背景

今日、デジタルの雨のエフェクトを見ました。とてもクールに見えました。その後、インターネットでそのエフェクトを実現する方法を確認しました。その後、このエフェクトを実現するためにキャンバスを使用するのは複雑ではないことに気づき、自分でいじってみました。 , Canvas についてあまり詳しくありませんが、まず調べてください。

実装

一連の考え

最初にアイデアについて話してから、コードについて説明します。中心的なことが 2 つあります。1 つは、落ちてくる数字の Y 軸座標がランダムに生成されるため、すべての数字が同じ水平線に乗らないようにすることです。一斉に倒れるよりは良い。2 つ目は、タイマーを使用して一定間隔で数字を描画するメソッドを呼び出して数字を描画し、描画される数字の位置を継続的に反復して落下の効果を実現する方法です。ここでは、基本的なアニメーションの実装を見てみましょう。キャンバスの_

コード

具体的なコードは次のように実装されており、異なる意見を持つ人はコメントやメッセージを残してコミュニケーションをとることができます。

//获取屏幕可视区域大小
  var d = document.documentElement;
  var clinetW = d.clientWidth;
  var clinetH = d.clientHeight;

  //设置画布大小
  var canvas = document.querySelector('canvas');
  canvas.width = clinetW;
  canvas.height = clinetH;

  var cxt = canvas.getContext('2d');
  var rainStr = 'The matrix of hackers';
  var arr = rainStr.split('');

  var fontSize = 14;
  // 计算行数
  var cols = Math.floor(clinetW / fontSize);
  // 初始化Y轴坐标
  var down = [];
  for (var i = 0; i < cols; i++) {
    down.push(Math.floor(Math.random() * -100));
  }

  function drawRain() {
    // 填充背景(ps:背景采用rgba,可尝试不同透明度的效果)
    cxt.fillStyle = 'rgba(0,0,0,.1)';
    cxt.fillRect(0, 0, clinetW, clinetH);

    // 设置字体颜色
    cxt.fillStyle = '#00ff00';
    for (var i = 0; i < down.length; i++) {
      var randomNum = Math.random();
      // 绘制文字
      cxt.fillText(arr[Math.floor(randomNum * arr.length)], i * fontSize, down[i] * fontSize);

      if (down[i] * fontSize > clinetH && randomNum > 0.9) {
        down[i] = 0;
      }
      //绘制文字的下一个位置
      down[i]++;
    }
  }

  setInterval(drawRain, 30);

シンプルなパッケージ

上記のコードを関数にカプセル化します。

/**
   * [rain description]
   * @param  {[Element]} canvas canvas元素对象
   * @param  {[String]} text    掉落的字符串
   * @param  {[String]} symbol  分隔符
   * @param  {[Number]} speed   掉落速度
   * @return {[type]}        [description]
   */
  function rain(canvas, text, symbol, speed) {
    //获取屏幕可视区域大小
    var d = document.documentElement;
    var clinetW = d.clientWidth;
    var clinetH = d.clientHeight;

    //设置画布大小
    var canvas = canvas || document.querySelector('canvas');
    canvas.width = clinetW;
    canvas.height = clinetH;

    var cxt = canvas.getContext('2d');
    var rainStr = text || 'The matrix of hackers';
    var symbol = symbol || '';
    var arr = rainStr.split(symbol);

    var fontSize = 14;
    // 计算行数
    var cols = Math.floor(clinetW / fontSize);
    // 初始化Y轴坐标
    var down = [];
    for (var i = 0; i < cols; i++) {
      down.push(Math.floor(Math.random() * -100));
    }

    function drawRain() {
      // 填充背景(ps:背景采用rgba,可尝试不同透明度的效果)
      cxt.fillStyle = 'rgba(0,0,0,.1)';
      cxt.fillRect(0, 0, clinetW, clinetH);

      // 设置字体颜色
      cxt.fillStyle = '#00ff00';
      for (var i = 0; i < down.length; i++) {
        var randomNum = Math.random();
        // 绘制文字
        cxt.fillText(arr[Math.floor(randomNum * arr.length)], i * fontSize, down[i] * fontSize);

        if (down[i] * fontSize > clinetH && randomNum > 0.9) {
          down[i] = 0;
        }

        down[i]++;
      }
    }
    var speed = speed || 30;
    setInterval(drawRain, speed);
  }
  var canvas = document.querySelector('canvas');
  var text = '富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善';
  rain(canvas, text, '', 30);

やっと

完全なコードを私のgithubに移動してください

原文へのリンク: gcchen/2018/12/20/canvas: マトリックスキャラクタードロップエフェクト/