<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="1400" height="800" style="border: 1px solid #000;">请更新您的浏览器</canvas>
<!--<button>-->
<!--点击-->
<!--</button>-->
<script>
var mycanvas = document.querySelector("canvas");
var ctx = mycanvas.getContext("2d");
ctx.textBaseline = "top";
ctx.font = "20px '宋体'";
var count =mycanvas.width/20;
var str = "qwertyuioplmkjnhbgvfcdxsza0123456789";
//第一个数组 数组用来存储值 数组的长度用来定义的是自己的列
var arr = [];
for (var i = 0; i < count; i++) {
arr[i] = 0;
}
var times = setInterval(draw,60);
var y =0;
function draw() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0,0,1400,800);
ctx.fillStyle = "#0f0";
for (var i = 0; i < count; i++) {
// 角标是0 ~str.length-1之间的随机值
// Math.random()*str.length
ctx.fillText(str[parseInt(Math.random()*str.length)], i * 20, arr[i]*20);
// ctx.fillText(str[i], i * 20, arr[i]*20);
// ctx.fillText("A", i * 20, arr[i]*20);
// console.log("当i = "+i +"---->"+arr[i]);
arr[i]++;
//此时实现了每一个列可以自主的控制
if(arr[i]>40 &&Math.random()>0.95){
arr[i] = 0
}
}
}
// document.querySelector("button").onclick = function () {
// clearInterval(times)
// }
// console.log(parseInt(Math.random()*15));
</script>
</body>
</html>