H5 canvas画布 文字雨滴效果展示

H5 canvas画布 文字雨滴效果展示
所用到的知识点：
1.Math.floor() === 向下取整
2.Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
3.setInterval()设置定时器
4.clearInterval()清除定时器
5.获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

所以这里我为了涵盖所有浏览器，将获取方法均列出来

<script>
		//获取画布对象
		var canvas=document.getElementById("canvas");
		//获取画布上下文
		var context=canvas.getContext("2d");
		//获取浏览器屏幕的宽度和高度，这里控制显示的宽度和高度，且涵盖所有浏览器
		var W=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		var H=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
		//设置canvas的宽度和高度
		canvas.width=W;
		canvas.height=H;
		//每个文字的大小
		var fontsize=16;
		//计算列
		var colunms = Math.floor(W/fontsize);
		//记录每列文字的y轴坐标
		var drops=[];
		//给每一列文字初始化一个起始点的位置
		for(var i=0;i<colunms;i++){
			drops.push(0);
		}
		console.log(drops)
		//运动的字体
		var str="显示的运动的字体";
		//绘画的函数
		function draw(){
			//黑BG的帆布  
			//半透明BG显示轨迹  
			context.fillStyle="rgba(0,0,0,0.05)";
			context.fillRect(0,0,W,H);
			//给字体添加样式
			context.font=fontsize+"px 微软雅黑";
			//给字体添加颜色
			context.fillStyle="#00cc33"
			//循环字体，写入画布中
			for(var i=0;i<colunms;i++){
				//随即汉字打印
				var index=Math.floor(Math.random()*str.length);
				//Math.random()方法可返回介于 0 ~ 1 之间的一个随机数  
				//index为随机整数  
				var x=i*fontsize;//x坐标
				var y=drops[i]*fontsize;//y坐标
				context.fillText(index,x,y);
				//如果要改变时间，肯定就是改变每次他的起点  
				//在屏幕上划线后，把它的顶部随机发送到顶部  
				//将一个随机性添加到复位中，使分散在轴上的下降  
				console.log(x,y,index)
				if (y>=canvas.height&&Math.random()>0.99) {
					drops[i]=0;
				}
				//增加的y坐标
				drops[i]++;
			}
		};
		draw();
		var intervalId=setInterval(draw,30)
		
		
		//测试效果开始
		function operateAnimation(objBtn){
			var opjBtn=document.getElementById("operate");
			if (objBtn.value=="开始") {
				objBtn.value="暂停";
				inintervalId=setInterval(draw,30);
			} else{
				objBtn.value="开始";
				clearInterval(intervalId);
			}
			return false;
		}
	</script>

以上代码为整体格式，如有建议请联系小编。