简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Canvas を使用して、Matrix にクールなコードレインを簡単に実装してください。 ！

青灯夜游
リリース： 2021-05-18 09:57:22
転載
2658 人が閲覧しました

この記事では、Canvasを使ってMatrixのかっこいいコードレインを簡単に実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1.効果

デモアドレス: https://www.albertyy.com/2020/7/codeRain.html

Canvas を使用して、Matrix にクールなコードレインを簡単に実装してください。 ！

2. 使用する知識ポイント

2.1 Canvas タグとは何ですか?

< ;canvas> ; はグラフィックを描画するために使用される HTML5 の新しい要素であり、画像の描画はスクリプト (通常は JavaScript) によって完了します。 タグはグラフィックの単なるコンテナであるため、グラフィックを描画するにはスクリプトを使用する必要があります。

2.1.1 Canvas の作成

##Instance:

<canvas id="mycanvas">你的浏览器不支持canvas</canvas>
ログイン後にコピー

タグは通常必須です ID を指定します属性 (スクリプト内で参照)、 タグは Canvas を使用して、Matrix にクールなコードレインを簡単に実装してください。 ！ タグと同じように見えますが、 には width 属性と height 属性の 2 つのオプション属性しかなく、src、alt がない点が異なります。属性。 の width 属性と height 属性を設定しない場合、デフォルトの幅は 300、高さは 150、単位は px になります。

css 属性を使用して幅と高さを設定することもできますが、幅と高さの属性が初期の比率と一致しない場合、歪みが発生します。

一部の古いブラウザ (特に IE9 より前の IE ブラウザ) またはブラウザは HTML 要素 をサポートしていないため、これらのブラウザでは常に代替コンテンツを表示できる必要があります。

をサポートするブラウザは タグのみを表示し、代替コンテンツは無視します。 をサポートしていないブラウザでは、代替コンテンツが直接表示されます。 Canvas を使用して、Matrix にクールなコードレインを簡単に実装してください。 ！ 要素とは異なり、 要素には終了タグ () が必要です。終了タグが存在しない場合、ドキュメントの残りの部分は代替コンテンツとみなされ、表示されません。 HTML ページでは複数の 要素を使用できます。

2.1.2 JavaScript を使用した画像の描画

canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript を通じて実行する必要があります。

描画手順:

1 要素を検索します: 

var c=document.getElementById("myCanvas");
ログイン後にコピー

2 コンテキスト オブジェクトを作成します: 

var ctx=c.getContext("2d");
ログイン後にコピー

getContext( "2d") オブジェクトは、パス、四角形、円、文字を描画し、画像を追加するためのさまざまなメソッドを備えた組み込みの HTML5 オブジェクトです。

3 赤い四角形を描画します

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,75);
ログイン後にコピー

fillStyle プロパティでは、CSS の色、グラデーション、またはパターンを設定できます。 fillStyle のデフォルト設定は #000000 (黒) です。 fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。

2.1.3 Canvas 座標

canvas は 2 次元のグリッドです。キャンバスの左上隅の座標は (0,0) です。上記の fillRect (0,0,150,75) メソッドは、左上隅 (0,0) から開始して、キャンバス上に 150x75 の長方形を描画することを意味します。

2.1.4 使用する必要がある canvas プロパティとメソッドの詳細説明

fillStyle プロパティ:

fillStyleプロパティの設定または戻り値 ペイントを塗りつぶすために使用される色、グラデーション、またはパターン。 

context.fillStyle=color|gradient|pattern;
ログイン後にコピー

値説明プロット塗りつぶしの色。デフォルト値は #000000 です。 図面を満たすグラデーション オブジェクト (線形または放射状)。

font 属性：

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 css中的font属性 相同。

context.font="italic small-caps bold 12px arial";
ログイン後にコピー
カラー
gradient
patternpattern 図面を埋めるために使用されるオブジェクト。
值描述
font-style规定字体样式。可能的值：
  • normal
  • italic
  • oblique
font-variant规定字体变体。可能的值：
  • normal
  • small-caps
font-weight规定字体的粗细。可能的值：
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size/line-height规定字号和行高，以像素计。
font-family规定字体系列。
caption使用标题控件的字体（比如按钮、下拉列表等）。
icon使用用于标记图标的字体。
menu使用用于菜单中的字体（下拉列表和菜单列表）。
message-box使用用于对话框中的字体。
small-caption使用用于标记小型控件的字体。
status-bar使用用于窗口状态栏中的字体。

fillText() 方法：

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

context.fillText(text,x,y,maxWidth);
ログイン後にコピー
参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置（相对于画布）。
y开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth可选。允许的最大文本宽度，以像素计。

fillRect() 方法：

fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。

context.fillRect(x,y,width,height);
ログイン後にコピー
参数描述
x矩形左上角的 x 坐标。
y矩形左上角的 y 坐标。
width矩形的宽度，以像素计。
height矩形的高度，以像素计。

2.2 JavaScript floor() 方法

floor() 方法返回小于等于x的最大整数。如果传递的参数是一个整数，该值不变。

Math.floor(x)
ログイン後にコピー

2.3 JavaScript random() 方法

random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。

Math.random()
ログイン後にコピー

例如获取 1 到 10 之间的一个随机数我们可以这样写：

Math.floor((Math.random()*10)+1);
ログイン後にコピー

2.4 JavaScript ceil() 方法

ceil() 方法可对一个数进行上舍入。如果参数是一个整数，该值不变。ceil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

Math.ceil(x)
ログイン後にコピー

2.5 Window setInterval() 方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作clearInterval() 方法的参数。

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
ログイン後にコピー
参数描述
code/function必需。要调用一个代码串，也可以是一个函数。
milliseconds必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

2.6 Window innerWidth 和 innerHeight 属性

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

注意：使用 outerWidth 和 outerHeight 属性获取的是加上工具条与滚动条窗口的宽度与高度。

获取：

window.innerWidth
window.innerHeight
ログイン後にコピー

设置:

window.innerWidth=pixels
window.innerHeight=pixels
ログイン後にコピー

3 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>代码雨炫酷效果:公众号AlbertYang</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
 
			html,
			body {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
		</style>
		<script>
			window.onload = function() {
				var H = window.innerHeight;
				var W = window.innerWidth;
				var mycanvas = document.getElementById(&#39;mycanvas&#39;);
				var ctx = mycanvas.getContext(&#39;2d&#39;);
 
				mycanvas.height = H;
				mycanvas.width = W;
 
				var fontsize = 18;
				var text = [];
				var lie = Math.floor(W / fontsize);
				var str = &#39;01&#39;
				for (var i = 0; i < lie; i++) {
					text.push(0);
				}
				ctx.font = fontsize + &#39;px 微雅软黑&#39;;
 
				function draw() {
					ctx.fillStyle = &#39;rgba(0,0,0,0.08)&#39;
					ctx.fillRect(0, 0, W, H);
					ctx.fillStyle = randColor();
					for (var i = 0; i < lie; i++) {
						var index = Math.floor(Math.random() * str.length);
						var x = Math.floor(fontsize * i)
						var y = text[i] * fontsize
						ctx.fillText(str[index], x, y);
						if (y > H && Math.random() > 0.99) {
							text[i] = 0
						}
						text[i]++;
					}
				}
 
				function randColor() {
					var r = Math.ceil(Math.random() * 155) + 100;
					var g = Math.ceil(Math.random() * 155) + 100;
					var b = Math.ceil(Math.random() * 155) + 100;
					return &#39;rgb(&#39; + r + &#39;,&#39; + g + &#39;,&#39; + b + &#39;)&#39;
				}
				console.log(randColor())
				var timer = setInterval(function() {
					draw();
				}, 1000 / 30)
			}
		</script>
	</head>
	<body data-gr-c-s-loaded="true">
		<canvas id="mycanvas" height="722" width="1536">你的浏览器不支持canvas</canvas>
	</body>
</html>
ログイン後にコピー

更多编程相关知识，请访问：编程视频！！

以上がCanvas を使用して、Matrix にクールなコードレインを簡単に実装してください。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
canvas
ソース：csdn.net
前の記事：jsにCSSスタイルを追加する方法 次の記事：Nodejsのブロッキングとノンブロッキングの詳しい説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1626
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1783
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1518
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1430
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1475
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！