js+canvas でコードレイン効果を実現
|
この記事では、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 バイナリログデータ復旧: 誤ってデータベースを削除した場合の詳細な説明
推薦する
Vue3 における ref と reactive の詳細な説明と拡張
目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...
MySQL 8.0 の非表示インデックスの詳細な説明
言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...
dockerコンテナがIP経由でホストマシンにアクセスできない問題を解決する方法の詳細な説明
問題の起源docker を使用する場合、残念ながら docker コンテナ内のホストのポート 80 ...
Vue3ライフサイクル関数とメソッドの詳細な説明
1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...
Mysqlはフィールドスプライシングのための3つの関数を実装している
データをオペレーションにエクスポートする場合、フィールドの結合は避けられません。MySQL でこれが...
Docker がデータベースのデプロイに適さない 7 つの理由のまとめ
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
Centos7.5 構成 Java 環境のインストール Tomcat の説明
Tomcat は Java 言語をベースにした Web サーバー ソフトウェアです。この記事では主に...
MySQL インポート csv エラーの 4 つの解決策
これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1：地元のせいエラー：エラー 39...
Linux で pyenv をインストールする方法
前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...
Vueは商品詳細ページの商品タブ機能を実装します
この記事の例では、商品詳細ページ機能を実現するためのVueの商品タブの具体的なコードを参考までに共有...
zabbix 4.04 の詳細なインストール チュートリアル (CentOS 7.6 ベース)
1. インストール前の準備: 1.1 JDKをインストールするopenjdkをアンインストールする...
MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
6つの珍しいHTMLタグ
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
MySQL ストアド プロシージャで月ごとにテーブルを作成する方法
詳細には立ち入らずに、コードに直接進みましょう。一緒にコミュニケーションを取り、学びましょう。月ごと...
Windows サーバー ポートを開きます (例としてポート 8080 を使用します)
ポートとは何ですか?私たちが通常参照するポートは、物理的な意味でのポートではなく、具体的には TCP...