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

コードレイン効果を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • コードレイン効果を実現するJavaScript
  • js+ca​​nvas でコードレイン効果を実現
  • JS+CSS+HTML はマトリックスのテキストの落下効果に似た「コードの雨」を実現します
  • HTML+JS で「コードレイン」効果 (マトリックステキスト落下効果) のソースコードを実現
  • JS がコードレイン特殊効果を実現

<<:  GDBデバッグMySQL実戦ソースコードコンパイルとインストール

>>:  VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

推薦する

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

js はランダムロールコールを実装します

この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

フレームセットの高さを設定する際のインターフェース変形の解決策

現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...

WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

レンダリング サンプルコード今日は、WeChat アプレットを使用して 2048 ゲームを実装します...

MySQLスレーブライブラリの復元の実践記録

状況の説明:今日、MySQL データベースのスレーブ ノード ホストにログインしたところ、/var/...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

MySQL インデックスの種類 (通常、ユニーク、フルテキスト) の説明

MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

Linux telnetコマンドの使用

1. はじめにtelnet コマンドは、リモート ホストにログインするために使用されます。これは、T...

docker view container log コマンドの実装

なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...

Nginx に lua-nginx-module モジュールをインストールする方法

ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...