지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! !

캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! !

青灯夜游
풀어 주다： 2021-05-18 09:57:22
앞으로
2713명이 탐색했습니다.

이 글에서는 매트릭스에서 멋진 코드비를 쉽게 구현하기 위해 캔버스를 활용하는 방법을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. 효과

데모 주소: https://www.albertyy.com/2020/7/codeRain.html

캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! !

2. 사용된 지식 포인트

2.1 tag?

는 그래픽을 그리는 데 사용되는 HTML5의 새로운 요소입니다. 이미지는 스크립트(일반적으로 JavaScript)를 통해 그려집니다. 태그는 그래픽을 위한 컨테이너일 뿐이므로 그래픽을 그리려면 스크립트를 사용해야 합니다.

2.1.1 캔버스(Canvas) 만들기

인스턴스: 

<canvas id="mycanvas">你的浏览器不支持canvas</canvas>
로그인 후 복사

태그는 일반적으로 스크립트에서 참조되는 id 속성을 지정해야 합니다. 에는 두 개의 선택적 속성인 width 및 height 속성만 있고 src 및 alt 속성은 없다는 점을 제외하면 캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! ! 태그와 동일해 보입니다. 에 너비 및 높이 속성을 설정하지 않은 경우 기본 너비는 300, 높이는 150, 단위는 px입니다.

CSS 속성을 사용하여 너비와 높이를 설정할 수도 있지만 너비와 높이 속성이 초기 비율과 일치하지 않으면 왜곡이 발생합니다.

일부 구형 브라우저(특히 IE9 이전의 IE) 또는 브라우저는 HTML 요소 <캔버스>를 지원하지 않기 때문에 이러한 브라우저에서는 항상 대체 콘텐츠를 표시할 수 있습니다.

를 지원하는 브라우저는 태그만 렌더링하고 그 안에 있는 대체 콘텐츠는 무시합니다. 를 지원하지 않는 브라우저는 대체 콘텐츠를 직접 렌더링합니다. 캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! ! 요소와 달리 요소에는 닫는 태그()가 필요합니다. 닫는 태그가 없으면 문서의 나머지 부분은 대체 콘텐츠로 간주되어 표시되지 않습니다. HTML 페이지에서 여러 <캔버스> 요소를 사용할 수 있습니다.

2.1.2 JavaScript를 사용하여 이미지 그리기

캔버스 요소 자체에는 그리기 기능이 없습니다. 모든 그리기 작업은 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 캔버스 좌표

캔버스는 2차원 격자입니다. 캔버스의 왼쪽 상단 모서리의 좌표는 (0,0)입니다. 위의 fillRect (0,0,150,75) 메소드는 왼쪽 위 모서리(0,0)부터 시작하여 캔버스에 150x75 직사각형을 그립니다.

2.1.4 사용해야 하는 캔버스 속성 및 메서드에 대한 자세한 설명

fillStyle 속성:

fillStyle 속성은 그림을 채우는 데 사용되는 색상, 그라데이션 또는 패턴을 설정하거나 반환합니다. 

context.fillStyle=color|gradient|pattern;
로그인 후 복사

valuedescription그림 채우기 색상의 색상입니다. 기본값은 #000000입니다. 그림을 채우는 그라데이션 개체(선형 또는 방사형)입니다. A

font 属性：

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

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

context.font="italic small-caps bold 12px arial";
로그인 후 복사
color
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>
로그인 후 복사

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

위 내용은 캔버스를 활용해 매트릭스에서 멋진 코드레인을 쉽게 구현해보세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
canvas
원천：csdn.net
이전 기사：js에 CSS 스타일을 추가하는 방법 다음 기사：Nodejs의 차단 및 비차단에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2070
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2235
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1880
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1763
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1796
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿