效果图:
思路:
1、需要用到html5中的canvas
2、生成一列随机的文本,
3、随机设置文本下落的x,y值
代码:
<!-- html部分 -->
<div class='container'>
<canvas id='c'></canvas>
</div>
/* css部分*/
.container{background:#333;}
#c{width:100%;height:100%}
<script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');//将canvas设定为2d模式
//制作全屏
c.height = window.screen.height;
c.width = window.screen.width;
//获取一个字符串数组
var chinese = 'insdgsd!~';
chinese = chinese.split('');
var font_size = 20;
var columns = c.width/font_size;//雨的列数
//把雨的y放进一个数组里面
var drops = [];
for(var x = 0;x < columns; x++){
drops[x] = 0;//雨的y初始值都为0
};
//把雨画出来
function draw(){
ctx.fillStyle = 'rgba(0,0,0,0.05)';//透明度
ctx.fillRect(0,0,c.width,c.height);//定义矩形现在的填充方式
ctx.fillStyle = '#0F0';//字体颜色
ctx.font = font_size + 'px arial';//字体大小
for(var i = 0;i < drops.length; i++){
//随机打印字符
var text = chinese[Math.floor(Math.random()*chinese.length)];
//字符的x = i*font_size; y = drops[i]*font_size;
ctx.fillText(text,i*font_size,drops[i]*font_size);
//字符超出屏幕就随机复位
if(drops[i]*font_size > c.height && Math.random()>0.95){
drops[i] = 0;
}
//字符的y坐标自增
drops[i]++;
}
}
setInterval(draw,33)
</script>