Share JS four fun hacker background effect codes
Example 1
<html>
<head>
<title>The Matrix</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<meta charset="utf-8">
<script>
/*
① Use setInterval(draw, 33) to set the refresh interval ② Use String.fromCharCode(1e2+Math.random()*33) to randomly generate letters ③ Use ctx.fillStyle='rgba(0,0,0,.05)'; ctx.fillRect(0,0,width,height); ctx.fillStyle='#0F0′; to repeatedly generate a semi-transparent black background with an opacity of 0.5 ④ Use x = (index * 10)+10; and yPositions[index] = y + 10; to sequentially determine the position of the displayed letters ⑤ Use fillText(text, x, y); to display a letter at the specified position. Repeating the above steps will produce the title effect of "The Matrix".
*/
$(document).ready(function () {
var s = window.screen;
var width = q.width = s.width;
var height = q.height;
var yPositions = Array(300).join(0).split('');
var ctx = q.getContext('2d');
var draw = function () {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'red';
ctx.font = '10pt Georgia';
yPositions.map(function (y, index) {
text = String.fromCharCode(1e2 + Math.random() * 33);
x = (index * 10) + 10;
q.getContext('2d').fillText(text, x, y);
if (y > Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix() {
Game_Interval = setInterval(draw, 30);
}
});
</script>
</head>
<body>
<div align="center">
<canvas id="q" width="500" height="500"></canvas>
</div>
</body>
</html>Example 2
<html>
<head>
<title>Do You Know HACKER-2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
</head>
<body>
<div align="center">
<canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var YPositions = Array(51).join(0).split('');
/*
The join() method is used to put all the elements in an array into a string. The split() method is used to split a string into a string array*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var draw = function () {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
YPositions.map(function (y, index) {
/*
map() passes each element through the function to the current matching set, generating a new jQuery object containing the return value*/
x = (index * 10);
ctx.fillText(parseInt(Math.random() * 10), x, y);
/*
Generate an 'a' character at the (x,y) coordinate position with index being the subscript of Ypositions*/
if (y > 500) {
YPositions[index] = 0;
} else {
YPositions[index] = y + 10;
}
/*
If the newly generated character has reached the end of <canvas>, then the position of the next new character is returned to the origin*/
});
};
setInterval(draw, 30);
</script>
</body>
</html>Example 3
<html>
<head>
<title>Do You Know HACKER-1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;">
<!-- The <canvas> tag is not supported in browsers below IE9-->
Please Upgrade your browser
</canvas>
<br>
<button type="button" id="puse">puse</button>
<button type="button" id="run">run</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
/*
var c2 = document.getElementById("myCanvasMatrix");
var ctx2 = c2.getContext("2d");
Where 'ctx2' is equivalent to the following 'ctx1'
*/
var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
/*
$("").get(0) means getting the internal DOM object reference, that is, after getting the DOM object of the object, you can use the corresponding DOM API
*/
/*
The getContext() method returns an environment for drawing on the canvas.
Canvas.getContext(contextID);
The only legal value of the contextID parameter is '2d', which means that 2D drawing is supported. '3d' may be supported in the future.
*/
var Matrix = function(){
/*
var my_gradient = ctx1.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx1.fillStyle=my_gradient;
*/
ctx1.fillStyle = 'rgba(0,0,0,.07)';
/*
The fillStyle property sets or returns the color, gradient, or pattern used to fill a painting.
rgba(R,G,B,A)
where '.05' represents alpha transparency*/
ctx1.fillRect(0,0,500,500);
/*
The fillRect() method fills the specified rectangle with the color, gradient, and pattern specified by the fillStyle attribute.
ctx1.fillStyle = "#0f0";
ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
/*
The principle is to continuously generate new transparent backgrounds and content to be displayed.
In this way, the new background keeps covering the old display content, and the new content stands out*/
};
runFun();
var id;
function stopFun(){
clearInterval(id);
}
function runFun(){
id = setInterval(Matrix,50);
/*
setInterval() definition and usage:
The setInterval() method calls a function or evaluates an expression at a specified period (in milliseconds).
The setInterval() method will call the function repeatedly until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as a parameter to the clearInterval() method.
*/
}
$("button#puse").click(function() {
stopFun();
});
$("button#run").click(function() {
runFun();
});
});
</script>
</body>
</html>Example 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>
<canvas id="content" width="1250px" height="602px"></canvas>
</body>
</html>
<script>
var cav = document.getElementById('content');
var w = window.screen.width;
var h = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx = cav.getContext('2d');
var draw = function(){
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = 'green';
ctx.font = '20px';
yPositions.map(function(y,index){
text = String.fromCharCode(1e2+Math.random()*330);
x = index*10;
cav.getContext('2d').fillText(text,x,y);
if(y>Math.random()*1e4){
yPositions[index]=0;
}else{
yPositions[index]=y+10;
}
});
}
setInterval('draw()',30);
</script> Referenceshttps://www.cnblogs.com/fenger-VIP/p/7651562.html This concludes this article about sharing four interesting hacker background effect JS codes. For more related hacker background effect JS code content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: SQL implements LeetCode (180. Continuous numbers)
>>: Pure CSS to achieve the text icon function by taking the first character of the string
Recommend
CentOS uses local yum source to build LAMP environment graphic tutorial
This article describes how to use the local yum s...
About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)
Database application is an indispensable part of ...
The iframe frame sets the white background to transparent in IE browser
Recently, I need to frequently use iframe to draw ...
Detailed explanation of jQuery method attributes
Table of contents 1. Introduction to jQuery 2. jQ...
Implementing timed page refresh or redirect based on meta
Use meta to implement timed refresh or jump of th...
Detailed tutorial on running Tomcat in debug mode in IDEA Maven project
1. Add the following dependencies in pom.xml <...
Detailed explanation of command to view log files in Linux environment
Table of contents Preface 1. cat command: 2. more...
Tutorial diagram of using Jenkins for automated deployment under Windows
Today we will talk about how to use Jenkins+power...
Solution to the problem of two slashes // appearing after the domain name when nginx is configured for domain name access
I rewrote my personal website recently. I bought ...
Implementation steps for building a MySQL master-slave replication environment based on Docker
1. Introduction The previous program architecture...
Getting Started with Website Building for Beginners - The Conditions and Tools Needed to Build a Website
Today, I will answer these newbie questions: Build...
Solve the problem that the borders of the search box and the search button cannot overlap
Today, when I was practicing with the Baidu page,...
How to access the local machine (host machine) in Docker
Question How to access the local database in Dock...
Detailed explanation of MySQL to obtain statistical data for each day and each hour of a certain period of time
Get daily statistics When doing a project, you ne...
Implementation of Redis master-slave cluster based on Docker
Table of contents 1. Pull the Redis image 2. Crea...