文字雨滴效果

我不是女神ヾ 2024-04-17 17:52 82阅读 0赞

## 如何使用canvas做出文字雨滴的效果 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>文字雨滴效果</title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#operate{
    				width: 50px;
    				height: 30px;
    				outline: none;
    			}
    		</style>
    	</head>
    	<body>
    		<input onclick="operateAnimation(this)" type="button" id="operate" value="暂停" />
    		<br>
    		<canvas id="canvas" style="background: #000;"></canvas>
    	</body>
    	<script>
    		// 获取画布对象
    		var canvas = document.getElementById("canvas");
    		//获取画布的上下文
    		var context = canvas.getContext("2d");  
    		//获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度,且涵盖所有浏览器
    		var W = window.innerWidth  
    		        || document.documentElement.clientWidth  //兼容
    		        || document.body.clientWidth;   //兼容
    		var H = window.innerHeight  
    		        || document.documentElement.clientHeight   //兼容
    		        || document.body.clientHeight; //兼容
    	
    		//设置convas的宽度和高度
    		canvas.width = W;
    		canvas.height = H;
    		//每个文字的字体大小
    		var fontSize = 16;
    		//计算列
    		var colunms = Math.floor(W /fontSize);
    		//Math.floor()===向下取整
    		//记录每列文字的y轴坐标
    		var drops = [];
    		//给每一个文字初始化一个起始点的位置
    		for(var i = 0; i<colunms; i++){
    			drops.push(0);
    		}
    		console.log(drops)
    		//运动的文字
    		var str = "显示的运动字体"
    		//4.fillText(str,x,y);原理就是去更改y的坐标位置
    		//绘画的函数
    		function draw(){
    			//黑BG的帆布
    			//半透明BGd的显示轨迹
    			context.fillStyle = "rgba(0,0,0,0.05)";
    			context.fillRect(0,0,W,H);
    			//给字体设置样式
    			context.font = "700 "+fontSize+"px  微软雅黑";  
    			//给字体添加颜色
    			context.fillStyle = "#ff0000";//可以rgb,hsl,标准色,十六进制颜色
    			//循环字体---写入画布中
    			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);
    				//如果要改变时间,肯定就是改变每次他的起点
    				//在屏幕上划线后,把他的顶部随机发送到顶部
    				//将一个随机性添加到复位中,使分散在轴上的下降
    				if(y >= canvas.height && Math.random() > 0.99){
    					drops[i] = 0;
    			}
    			//增加的y坐标
    			drops[i]++;
    		}
    	};	
    	    draw();
    		var intervalId = setInterval(draw,30);
    		//测试效果开始/暂停
    		function operateAnimation(objBtn){
    			var operate = document.getElementById("operate");
    			if(objBtn.value == "开始"){
    				objBtn.value = "暂停";
    				intervalId = setInterval(draw,30);
    			}else{  
                    objBtn.value = "开始";  
                    clearInterval(intervalId);  
                }  
                return false;  
    		}
    	</script>
    </html>

**细节的五个知识点总结**  
\*\*（一）\*\*获取浏览器屏幕的宽度和高度  
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。  
对于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  
*所以这里我为了涵盖所有浏览器，将获取方法均列出来*

\*\*（二）\*\*setInterval（翻译为set设置Interval间隔）  
setIntervalsetInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

【与setTimeout的使用区别】  
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。  
(方 法):  
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。  
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

\*\*（3）\*\*Math.floor() === 向下取整

\*\*（4）\*\*Math.random()方法可返回介于 0 ~ 1 之间的一个随机数

\*\*（5）\*\*clearInterval（翻译为清除clear间隔interval）  
①clearInterval()：取消由 setInterval() 设置的 timeout  
②setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。

## 以上是文字雨滴的完整效果，有问题留言小编！ ##