Home > Web Front-end > JS Tutorial > Use canvas to easily implement cool code rain in the Matrix! !

Use canvas to easily implement cool code rain in the Matrix! !

青灯夜游
Release: 2021-05-18 09:57:22
forward
2730 people have browsed it

This article will introduce to you how to use canvas to easily realize the cool code rain of the Matrix. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Effect

Demo address: https://www.albertyy.com/2020/7/codeRain.html

Use canvas to easily implement cool code rain in the Matrix! !

2. Knowledge points used

2.1 What is canvas tag?

< ;canvas> is a new element in HTML5 used for drawing graphics, and drawing images is completed through scripts (usually JavaScript). The tag is just a container for graphics, you must use a script to draw the graphics.

2.1.1 Create a Canvas

##Instance:

<canvas id="mycanvas">你的浏览器不支持canvas</canvas>
Copy after login

tag is usually required Specify an id attribute (referenced in the script), The tag looks the same as the Use canvas to easily implement cool code rain in the Matrix! ! tag, except that has only two optional attributes, width and height attributes, but no src, alt attribute. If you do not set the widht and height attributes for , the default width is 300, height is 150, and the units are px.

You can also use css attributes to set the width and height, but if the width and height attributes are inconsistent with the initial ratio, distortion will occur.

Because some older browsers (especially IE browsers before IE9) or browsers do not support the HTML element , you should always be able to display alternative content on these browsers.

Browsers that support will only render the tag and ignore the alternative content. Browsers that do not support will render alternative content directly. Unlike the Use canvas to easily implement cool code rain in the Matrix! ! element, the element requires a closing tag (). If the closing tag is not present, the rest of the document will be considered alternative content and will not be displayed. You can use multiple elements in an HTML page.

2.1.2 Using JavaScript to draw images

The canvas element itself has no drawing capabilities. All drawing work must be done through JavaScript.

Drawing steps:

1 Find the element:

var c=document.getElementById("myCanvas");
Copy after login

2 Create the context object:

var ctx=c.getContext("2d");
Copy after login

getContext( The "2d") object is a built-in HTML5 object with various methods for drawing paths, rectangles, circles, characters, and adding images.

3 Draw a red rectangle

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,75);
Copy after login

The fillStyle property can set CSS color, gradient, or pattern. The default setting for fillStyle is #000000 (black). The fillRect(x,y,width,height) method defines the current filling method of the rectangle.

2.1.3 Canvas coordinates

canvas is a two-dimensional grid. The coordinates of the upper left corner of the canvas are (0,0). The fillRect (0,0,150,75) method above means: draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).

2.1.4 Detailed explanation of the canvas properties and methods that need to be used

fillStyle property:

fillStyle property setting or return The color, gradient, or pattern used to fill the painting.

context.fillStyle=color|gradient|pattern;
Copy after login

ValueDescriptionPlot The color of the fill color. The default value is #000000. A gradient object (linear or radial) that fills the drawing.

font 属性

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

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

context.font="italic small-caps bold 12px arial";
Copy after login
color
gradient
patternpattern object used to fill the drawing.
描述
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);
Copy after login
参数描述
text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置(相对于画布)。
y开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth可选。允许的最大文本宽度,以像素计。

fillRect() 方法:

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

context.fillRect(x,y,width,height);
Copy after login
参数描述
x矩形左上角的 x 坐标。
y矩形左上角的 y 坐标。
width矩形的宽度,以像素计。
height矩形的高度,以像素计。

2.2 JavaScript floor() 方法

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

Math.floor(x)
Copy after login

2.3 JavaScript random() 方法

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

Math.random()
Copy after login

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

Math.floor((Math.random()*10)+1);
Copy after login

2.4 JavaScript ceil() 方法

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

Math.ceil(x)
Copy after login

2.5 Window setInterval() 方法

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

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

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

2.6 Window innerWidth 和 innerHeight 属性

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

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

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

获取:

window.innerWidth
window.innerHeight
Copy after login

设置:

window.innerWidth=pixels
window.innerHeight=pixels
Copy after login

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>
Copy after login

更多编程相关知识,请访问:编程视频!!

The above is the detailed content of Use canvas to easily implement cool code rain in the Matrix! !. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template