コードレイン効果を実現するJavaScriptキャンバス

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

まずは効果画像をご覧ください

このレンダリングは、昔の映画に出てくるハッキング技術にとてもよく似ていませんか? かなり難しそうに見えますが、実際には操作は非常に簡単です。

キャンバスはキャンバスを意味します。まずキャンバスが必要です

<本文>
    <キャンバスid="キャンバス"></キャンバス>
</本文>

背景をこのように設定してみましょう

HTML部分

<本文>
    <キャンバスid="キャンバス"></キャンバス>
    <div></div>
</本文>

CSS部分

<スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        ＃キャンバス{
            オーバーフロー: 非表示;
            位置: 絶対;
            zインデックス: 1;
        }
        div{
            幅: 480ピクセル;
            高さ: 280px;
            境界線の半径: 50%;
            背景画像: url(img/eighthdaymaterial.jpg);
            位置: 絶対;
            上: calc(50% - 140px);
            左: calc(50% - 240px);
            zインデックス: 2;
            不透明度: 0.4;
        }
</スタイル>

以下は JS 部分、キャンバス、ブラシ、キャンバスの幅と高さです。

<スクリプト>
 var キャンバス = document.getElementById("キャンバス");
    var コンテキスト = canvas.getContext("2d");
    var 幅 = window.innerWidth;
    var 高さ = window.innerHeight;
    キャンバスの高さ = 高さ;
    キャンバスの幅 = 幅;
</スクリプト>

詳細なコードは次のとおりです。

<スクリプト>
    var キャンバス = document.getElementById("キャンバス");
    var コンテキスト = canvas.getContext("2d");
    var 幅 = window.innerWidth;
    var 高さ = window.innerHeight;
    キャンバスの高さ = 高さ;
    キャンバスの幅 = 幅;
    //フォントサイズ変数を設定します。var fontsize = 16;
    // 1 行に同時に格納できる文字数を格納する変数を設定します。var count = width/fontsize;
    console.log(カウント);
    //単語を格納する配列を作成します。var arr = [];
    for(var i = 0; i < count; i++){
        ar.push(0);
        コンソールにログ出力します。
    }
    // 配列にデータを保存する var stringarr = "I Love You"
    関数 show(){
    //描画を開始しますcontext.beginPath();
        context.fillRect(0,0,幅,高さ);
        //Transparencycontext.fillStyle = "rgba(0,0,0,0.05)";
        //フォントの色 context.strokeStyle = "chartreuse";
        のために（
            var i =0;
            i<arr.length;
            私は++
        ）
        {
            var x = i*フォントサイズ;
            var y = arr[i]*フォントサイズ;
            var index = Math.floor(Math.random()*stringarr.length);
            context.strokeText(文字列arr[インデックス],x,y);
            もし（
                y >=高さ&&Math.random()>0.99
            ){
                arr[i] = 0;
            }
            arr[i]++;
        }
        コンテキスト.closePath();
    }
    show(); //関数を呼び出す var timer = setInterval(show,30);
</スクリプト>

不備があれば、さらに詳しいご指導をお願いします。

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

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