この記事では、コードレイン効果を実現するためのキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 まずは効果画像をご覧ください このレンダリングは、昔の映画に出てくるハッキング技術にとてもよく似ていませんか? かなり難しそうに見えますが、実際には操作は非常に簡単です。 キャンバスはキャンバスを意味します。まずキャンバスが必要です <本文> <キャンバス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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: GDBデバッグMySQL実戦ソースコードコンパイルとインストール
>>: VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル
目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...
目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...
フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...
Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
目次グローバル変数として可変ホイスト一時的なデッドゾーンブロックスコープ重複したステートメント宣言さ...
最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...
最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用す...
競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...
最近、Docker がコンテナの起動時に特定のプロセスを直接実行できるようにする方法を調べていたとこ...
前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカーHTML のリンクの...
1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...