Html code|
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Matrix</title>
</head>
<body>
<canvas id=”canvas1″></canvas>
<script src=”index.js”></script>
</body>
</html>
JAVASCRIPT|
const canvas = document.getElementById(‘canvas1’)
const ctx = canvas.getContext(‘2d’)
canvas.width=window.innerWidth
canvas.height=window.innerHeight
let mouse ={
x:null,
y:null
}
let set=[“A”,”B”,”C”,”D”,”E”,”F”,”G”,”H”,”I”,”J”,”K”,”L”,”M”,”N”,”O”,”P”,”Q”,”R”,”S”,”T”,”U”,”V”,”W”,”X”,”Y”,”Z”,0, 1, 2, 3, 4, 5, 6, 7, 8, 9,’$’,’#’]
let dhaval=()=>{
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.fillStyle=’white’
ctx.font=’10px arial’
for(let i=0;i<canvas.width;i+=10)
{
for(let j=0;j<canvas.height;j+=10)
{
let r=Math.floor(Math.random()*255)
let g=Math.floor(Math.random()*255)
let b=Math.floor(Math.random()*255)
ctx.fillStyle=`rgb(${r},${g},${b})`
let rnd=Math.floor(Math.random()*38)
ctx.fillText(set[rnd],i,j)
}
}
}
setInterval(dhaval,150)
css|
*{
margin: 0;
}
#canvas1{
background-color: black;
}