1. Add canvas tag
<!DOCTYPE html> <html> <head>
<meta charset="UTF-8"/>
<meta name="Authar" content="Mu Renzi Wei Yichen" /> <title>Data down...</title> <style> #canvas{ background-color:black; } </style> </head> <body> <canvas id="canvas"></canvas> <script> //Get the canvas tag by id var canvas=document.getElementById("canvas"); //set size //Screen var s=window.screen; //screen length var w=canvas.width=s.width; //screen height var h=canvas.height=s.height; </script> </body> </html>
If nothing else, the effect should be a black screen
2. Long story short, code chat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="Mu Renzi Wei Yichen" />
<title>Data down...</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//Get the canvas tag by id
var canvas=document.getElementById("canvas");
//set size
//Screen
var s=window.screen;
//screen length
var w=canvas.width=s.width;
//screen height
var h=canvas.height=s.height;
//Define the brush in the artboard
var ctx=canvas.getContext("2d");
//Define the array, 256 subsets, and all are the same number
var array=Array(256).join("1").split("");//join is to join the subsets of the array into strings, and split is to split the strings into arrays
//Because the page is similar to a moving picture, that is, every second, the page will change, so I need a function
function gif(){
//What is the data? The recorded string, the next step is to add text to the artboard and set the location of the text
// Traverse the array once, and the position of each text changes with the subscript of the array
array.map(function(item,index){
ctx.fillStyle="red";
//item is the data corresponding to the array subscript, index is the array subscript
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//Random text, add it at the location
ctx.fillText(text,index*10,100);//ctx.fillText(text,x,y);text refers to the added text, x is the x coordinate, y is the y coordinate
})
}
gif();
</script>
</body>
</html>
looks like sanskrit
3. Next is Sanskrit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="Mu Renzi Wei Yichen" />
<title>Data down… …</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//Get canvas by id Label
var canvas=document.getElementById("canvas");
//set size
//screen
var s=window.screen;
//screen length
var w=canvas.width=s.width;
//screen height
var h= canvas.height=s.height;
//Define the brush in the artboard
var ctx=canvas.getContext("2d");
//Define an array, 256 subsets, all of the same number
var array=Array(256).join("1").split("");//join is to connect the subsets of the array into strings, split is to split the strings into arrays
//because the pages are similar Figure, that is, every second, the page will change, so I need a function
function gif(){
//What is the data? The recorded string, the next step is to add text to the drawing board, set the text location
//traverse the array once, the position of each text changes with the array subscript
array.map(function(item,index){
ctx.fillStyle=" red";
//item is the data corresponding to the array subscript, index is the array subscript
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//Transcode random text according to the URL , add it at the location
ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text refers to the added text, x is the x coordinate, y is the y coordinate
array[index]=(item>700+Math.random()*400)?0:item+10;
})
}
//Change the page every 50ms, simply the performance is 50ms, borrow the timer
setInterval(gif,50 );
</script>
</body>
</html>
4. The color is monotonous and very lonely, so a random color is designed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="Mu Renzi Wei Yichen" />
<title>Data down… …</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//Get canvas by id Label
var canvas=document.getElementById("canvas");
//set size
//screen
var s=window.screen;
//screen length
var w=canvas.width=s.width;
//screen height
var h= canvas.height=s.height;
//Define the brush in the artboard
var ctx=canvas.getContext("2d");
//Define an array, 256 subsets, all of the same number
var array=Array(256).join("1").split("");//join is to connect the subsets of the array into strings, split is to split the strings into arrays
//because the pages are similar Figure, that is, every second, the page will change, so I need a function
function gif(){
//What is the data? The recorded string, the next step is to add text to the drawing board, set the text location
//traverse the array once, the position of each text changes with the array subscript
array.map(function(item,index){
ctx.fillStyle=colors ();
//item is the data corresponding to the array subscript, index is the array subscript
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//Transcode random text according to the URL , add it at the location
ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text refers to the added text, x is the x coordinate, y is the y coordinate
array[index]=(item>700+Math.random()*400)?0:item+10;//Modify the y coordinate of each subset, and the y coordinate has a range
})
}
//Hexadecimal Color
function colors(){
var color=Math.ceil(Math.random()*16777215).toString(16);//toString(16) converts decimal to hexadecimal
//When the color is less than six digits, add 0 in front;
while(color.length<6){color="0"+color;}
return "#"+color;
}
//Change the page every 50ms, simple Is the performance 50ms, borrow the timer
setInterval(gif,50);
</script>
</body>
</html>
5. Every second changes not only these, but also need to continue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="Mu Renzi Wei Yichen" />
<title>Data down...</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//Get the canvas tag by id
var canvas=document.getElementById("canvas");
//set size
//Screen
var s=window.screen;
//screen length
var w=canvas.width=s.width;
//screen height
var h=canvas.height=s.height;
//Define the brush in the artboard
var ctx=canvas.getContext("2d");
//Define the array, 256 subsets, and all are the same number
var array=Array(256).join("1").split("");//join is to join the subsets of the array into strings, and split is to split the strings into arrays
//Because the page is similar to a moving picture, that is, every second, the page will change, so I need a function
function gif(){
//overwrite the previous painting
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,w,h);
//What is the data? The recorded string, the next step is to add text to the artboard and set the location of the text
// Traverse the array once, and the position of each text changes with the subscript of the array
array.map(function(item,index){
ctx.fillStyle=colors();
//item is the data corresponding to the array subscript, index is the array subscript
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//Transcode random text according to the URL and add it at the location
ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text refers to the added text, x is the x coordinate, y is the y coordinate
array[index]=(item>700+Math.random()*400)?0:item+10;//Modify the y coordinate of each subset, and the y coordinate has a range
})
}
// color in hexadecimal
function colors(){
var color=Math.ceil(Math.random()*16777215).toString(16);//toString(16) converts decimal to hexadecimal
//When the color is less than six digits, add 0 in front;
while(color.length<6){color="0"+color;}
return "#"+color;
}
//Change the page every 50ms, simply the performance is 50ms, borrow the timer
setInterval(gif,50);
</script>
</body>
</html>
6. Done this is done
Brothers and sisters, I am a newcomer, and my knowledge is not comprehensive enough. If the writing is not good, this code is only provided for viewing.