コードレイン効果を実現する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 をインストールするためのグラフィック チュートリアル

推薦する

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...

Dockerコンテナを使用する簡単な例

目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...

Linux で実行中のバックグラウンド プログラムを表示および終了する方法

Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

JavaScript における var、let、const の違いの詳細な説明

目次グローバル変数として可変ホイスト一時的なデッドゾーンブロックスコープ重複したステートメント宣言さ...

Linux に MySQL 8.0.19 をインストールするための詳細な手順と問題解決方法

最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...

uni-app を使用して上部のナビゲーション バーにボタンと検索ボックスを表示する方法

最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用す...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

Dockerコンテナが起動直後に終了する問題を解決する

最近、Docker がコンテナの起動時に特定のプロセスを直接実行できるようにする方法を調べていたとこ...

マークアップ言語 - アンカー

前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...

最新のmysql-5.7.21のインストールと設定方法

1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...