（ Tiktok , There are still a lot of imperfections , Follow up later , Copy code directly , Change the suffix name to ：.html , Run directly to see the effect !）
Matrix code rain effect - Source code <canvas id="canvas" style="background:black" width="620"
height="340"></canvas> <audio style="display:none; height: 0" id="bg-music"
preload="auto" src="music/ The matrix .mp3"></audio> <style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;} </style> <script
type="text/javascript"> window.onload = function(){ // Get drawing objects var canvas =
document.getElementById("canvas"); // Gets the context of the drawing var context =
canvas.getContext("2d"); // Gets the width and height of the browser screen var W = window.innerWidth; var H =
window.innerHeight; // set up canvas Width and height of canvas.width = W; canvas.height = H;
// Font size of each text var fontSize = 15; // Calculation column var colunms = Math.floor(W /fontSize);
// Record the y Axis coordinates var drops = []; // Initialize a starting point position for each text for(var i=0;i<colunms;i++){
drops.push(0); } // Words of movement var str ="01abcdefghijklmnopqurstuvwxyz";
//4:fillText(str,x,y); The principle is to change y Coordinate position of // The function of painting function draw(){ // Let the background gradually from transparent to opaque
context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); // Style fonts
//context.font = "700 "+fontSize+"px Microsoft YaHei "; context.font = fontSize + 'px
arial'; // Color fonts context.fillStyle ="green";// Change the font color at will // Write to graphics for(var
i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x =
i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y);
// If you want to change the time , It must be to change his starting point every time if(y >= canvas.height && Math.random() > 0.92){ drops[i]
= 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random()
* 256); var g = Math.floor(Math.random() * 256); var b =
Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw();
setInterval(draw,33); }; </script>
# design sketch
Technology