この記事では、コードレイン効果を実現するためのキャンバスの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 まずは効果画像をご覧ください このレンダリングは、昔の映画に出てくるハッキング技術にとてもよく似ていませんか? かなり難しそうに見えますが、実際には操作は非常に簡単です。 キャンバスはキャンバスを意味します。まずキャンバスが必要です <本文> <キャンバス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 をインストールするためのグラフィック チュートリアル
<br />原文: http://andymao.com/andy/post/80.ht...
この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...
目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...
現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...
レンダリング サンプルコード今日は、WeChat アプレットを使用して 2048 ゲームを実装します...
状況の説明:今日、MySQL データベースのスレーブ ノード ホストにログインしたところ、/var/...
Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...
MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...
この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...
1. はじめにtelnet コマンドは、リモート ホストにログインするために使用されます。これは、T...
なぜログを読む必要があるのでしょうか?たとえば、コンテナの起動に失敗したがプロンプトが表示されない場...
ngx_lua_module は、lua パーサーを nginx に埋め込み、lua 言語で記述され...
この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...
Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...
目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...