<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
}
</style>
</head>
<body>
<canvas id="canvas" ></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var width=canvas.width=window.innerWidth;
var height=canvas.height=window.innerHeight;
var fontSize=20;
var arr=[];/* 数组用来存放canvas中文字的Y值 更新位置*/
var count=Math.floor(width/fontSize);
var y=0;
for(var i=0;i<count;i++){
arr.push(0);//规定初始时从页面最顶端下来
}
var str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
setInterval(function(){
context.beginPath();
context.fillStyle="rgba(0,0,0,0.05)";
context.fillRect(0,0,width,height);
context.closePath();
for(var i=0;i<arr.length;i++){
var index=Math.floor(Math.random()*str.length);
var x=i*fontSize;
var y=arr[i]*fontSize;
context.beginPath();
context.font="700 20px 宋体 ";
context.fillStyle="green";
context.fillText(str[index],x,y);
context.closePath();
arr[i]++;
if(y>=height&&Math.random()>0.99){//0.99的随机数造成列消失的时间不一致，产生的列也随之改变
arr[i]=0;
}
}
},100)
</script>
</body>
</html>
扫一扫
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
