js+ca​​nvas でコードレイン効果を実現

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   *{
    マージン: 0px;
    パディング: 0px;
   }
   html,本文{
    高さ: 100%;
    幅: 100%;
   }
   #キャンバス{
    表示: ブロック;
   }
  </スタイル>
 </head>
 <本文>
  <キャンバスid="キャンバス"></キャンバス>
  <script type="text/javascript">
   var キャンバス = document.getElementById('キャンバス')
   var c = キャンバス.getContext('2d')
   var cw = キャンバス.幅 = ウィンドウ.インナー幅
   var ch = キャンバス.height = ウィンドウ.innerHeight 
   
   var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l']
   var init = 関数(){
    this.x = Math.random()*cw
    y = 0 です
    this.content1 =Math.random()*15 
    this.speed = Math.random()*5+20
    this.add = 関数(){
     this.y+=this.speed
    }
    this.reset1 = 関数(){
     this.x = Math.random()*cw
     y = 0 です
    }
   }
   //ランダムな色を定義します var gl = c.createLinearGradient(0, 0, cw, ch);
       gl.addColorStop(0, '赤');
       
       gl.addColorStop(.5, '黄色');
       
       gl.addColorStop(1, 'シアン');
   
   var arr = []
   (var i=0;i<20;i++){
    arr.push(新しいinit())
   }
   setInterval(関数(){
    
    c.fillStyle = 'rgba(0,0,0,0.05)'
    c.fillRect(0,0,cw,ch)
    //上記の 2 つの文は背景を与えるためのもので、タイマーを入れて、実行されるたびに 1 回再描画されるようにします//キャンバスをクリアするために使用されます//1、yong rgba() は色を示すために透明度を与えます。新しく描画されたキャンバスは前のキャンバスを完全には覆わないので、グラデーション効果がありますfor(var i=0;i<arr.length;i++){
     c.fillStyle = gl
     c.font = '30px Microsoft YaHei'
     
     c.fillText(str[i],arr[i].x,arr[i].y)
     
     // 彼を一番下まで落として戻ってくる if (arr[i].y>ch-20) {
      arr[i].reset1()
     }
     arr[i].add()
    }
    
    
    //
   },1000/60)
  </スクリプト>
 </本文>
</html>

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

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

<<:  Linux 最速のテキスト検索ツール ripgrep (grep の最良の代替)

>>:  MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明

推薦する

JavaScript で Webpack を使用するチュートリアル

目次0. Webpackとは1. Webpackの使用2. Webpackのコアコンセプト2.1 エ...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

JavaScript Canvas は動的なワイヤーフレーム効果を描画します

この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...

MySQLの7種類のログの概要

MySQL には次のログ ファイルがあります。 1: 再実行ログ2: ロールバックログ(元に戻すログ...

jsはキャンバスに基づいて時計コンポーネントを実装します

圧縮アップロード画像、スクラッチカード、ポスター作成、チャートプラグインなど、フロントエンド開発にお...

MySQL の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

MySQLでカーソルを宣言する方法

MySQL でカーソルを宣言する方法: 1. 変数とカーソルを宣言する 結果をvarchar(300...

NodeJS は画像テキスト分割を実現します

この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...

MySQLクエリのパフォーマンスを分析する方法

目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...

Vueのフロントエンドとバックエンドのデータのやり取りと表示を理解する方法

目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

Windowsタイムサーバーの設定方法の詳しい説明

最近、会社のサーバーの時間が不正確で、外部の時間ソースと同期できないことがわかりました。会社はドメイ...

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...