この記事では、js+canvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 コード: <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux 最速のテキスト検索ツール ripgrep (grep の最良の代替)
>>: MySQL バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...
Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...
1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...
1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...
MySQLでテーブルやデータを削除する場合、 [エラー] 1451 - 親行を削除または更新できませ...
最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...
目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...
多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...
目次物体オブジェクト定義オブジェクトのメンバーを反復処理するJS組み込みオブジェクト数学オブジェクト...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
Docker コンテナは互いに分離されており、相互にアクセスできないことは誰もが知っていますが、依存...
一般的な携帯電話のスタイル: @media all および (orientation : 縦向き) ...
XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰...
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...