「前端特效」----文字瀑布流效果

效果图：

思路：
1、需要用到html5中的canvas
2、生成一列随机的文本，
3、随机设置文本下落的x，y值

代码：

<!-- html部分 -->
<div class='container'>
	<canvas id='c'></canvas>
</div>
1
2
3
4

/* css部分*/
.container{background:#333;}
#c{width:100%;height:100%}
1
2
3

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44