canvas二进制流与innerText动态打字效果_大数据背景二进制canvas特效-CSDN博客

本文链接：https://blog.csdn.net/longdage1992/article/details/48940793

canvas二进制流与innerText动态打字效果

本文旨在分享两篇练习示例。

canvas实现二进制流

screen对象：基本上只是用来表明客户端能力，存放浏览器屏幕的信息，比如浏览器窗口外部显示器的信息，像素宽高等等。JavaScript程序将根据它来优化显示。

Array.join([para])：Array的join方法，参数可选。带参数，则将当前的Array用参数值分隔拼接成字符串；不带参数则默认用逗号分隔。

Array.map(callback([para1],[para2],[para3]))：返回特定规则的新数组。para1为当前遍历到的值，para2为para1的索引，para3为遍历的数组(默认为当前数组)。

setInterval(fn,time)：自动延迟执行。每隔time时间，执行一次fn。与setTimeout(fn,time)要相区别，setTimeout是延迟time时间后执行一次fn

fromCharCode(para1，[para...])：可接受指定的 Unicode 值，然后返回一个字符串。注意：该方法是String的静态方法，不能用你创建的String对象引用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>numberRain.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text.css">
    	body{
    		overflow:hidden;
    		margin:0;
    	}
    </style>
	<!--[if IE]>
		<script type="text/javascript" src="../toolJS/excanvas.js"></script>
	<![endif]-->
  </head>
  
  <body>
  
    <canvas id="numberRain" style="background:black;"></canvas>
    
    <script type="text/javascript">
    	var s = window.screen;
    	var myCanvas = document.getElementById('numberRain');
    	var width = myCanvas.width=s.width;	
    	var height = myCanvas.height = s.height;
    	var numberRain = myCanvas.getContext('2d');
    	var numArray = Array(256).join(1).split('');//初始化255长度的array赋值为1
    	
    	/**
    	*机能：画数字
    	*/
    	function downRain(){
    		numberRain.fillStyle="rgba(0,0,0,0.3)";
    		numberRain.fillRect(0,0,width,height);
    		numberRain.fillStyle="#0F0";//绿色
    		numberRain.font="bold 20px Arail";
    		numArray.map(function(x_pos,index){
    			y_pos = index * 10;//调整上下间距
    			var num = String.fromCharCode(48 + Math.random() * 2);//48,49是0和1
    			numberRain.fillText(num,x_pos * 2,y_pos * 2);
    			numArray[index] = (x_pos > 800 + Math.random() * 1e4) ? 0 : x_pos + 20;
    		});
    	}
    	setInterval(downRain,100);
    </script>
	</body>
</html>

效果截图如下：

innerText实现动态打字效果

看到谋篇爱心类作品，我被里面的动态打字效果与canvas画爱心的效果迷住了。

趁着放假时间我研究了一下源码。

源码的动态文字效果是用JQuery的html()方法实现的，奈何本人没学过JQuery，就用原生的JS写了一个类似的效果。

本例子主要是对文档类型(DOM)以及String的substr与substring两个方法的运用。

substr(para1,[para2])：第一个参数表示截取字符串的初始位置，第二个参数表示截取多少个字符，如果没para2，则默认为字符串个数。

substring(para1,[para2])：para1表示字符串截取的位置，para2表示截止的位置，如果没有para2，则默认为字符串最后一位。

clearInterval(para)：是跳出循环延迟setInterval(fn,time)的方法，para一定是setInterval的返回值。

documentType：文档类型，某些浏览器不支持动态创建dom，只能通过解析文档的代码形式创建。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

document.createElement：动态创建元素，即html语言中的标签。

className：标签元素的class属性(调用样式用的)。常用的还有id(唯一标识)、title(标题)、lang(语言)、dir(语言的方向，ltr从左到右，rtl右到左)。

appendChild：添加子节点。

innerText：内置的文本内容。在节点正式渲染进页面后，每次改动它都会在页面得到相应的变动。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>诉衷肠.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{background:#ffe;font-family:"微软雅黑";}
	.title{
		width:50%;
		margin:0 auto;
		font-size:20px;
		color:#7f0055;
		font-weight:bold;
		text-align:center;
	}
	.text{
		width:50%;
		margin:0 auto;
		font-size:15px;
		color:#7f0055;
		font-weight:bold;
	}
</style>

  </head>
  
  <body>
  <script type="text/javascript">
  		var sheetDiv = document.createElement("div");
  		var titleDiv = document.createElement("div");
  		titleDiv.className="title";
  		var textDiv = document.createElement("div");
  		textDiv.className="text";
  		sheetDiv.appendChild(titleDiv);
  		sheetDiv.appendChild(textDiv);
  		
  		document.body.appendChild(sheetDiv);
		var title = "诉衷肠";
	  	var text = "无限柔情像，春水一般荡漾，荡漾到你的身旁，你可曾听到声响？" 
	  	+"你的影子闪 ，进了我的心房，你的言语 你的思想，也时常教人神往。"
	  	+"我总是那样盼望，盼望有一个晚上，倾诉着我的衷肠，从今后就莫再彷徨。"
		+"限柔情像，春水一般荡漾，荡漾到你的身旁，你可曾听到声响。"
		+"你的影子闪 ，进了我的心房，你的言语 你的思想，也时常教人神往。"
	  	+"我总是那样盼望，盼望有一个晚上，倾诉着我的衷肠，从今后就莫再彷徨。"
	  	/**
	  	*机能：书写标题
	  	*过程：获取本内容。
	  	*	  如果文本内容结尾为“_”，去掉“_”。
	  	*	  如果文本内容结尾非“_”，拼标题的下一个字。
	  	*	  文本内容大于预设标题(注意，多拼了“_”，所以不能用等于)。
	  	**/
	  	var showTitle = setInterval(function(){
	  		var innerText = titleDiv.innerText;
	  		titleDiv.innerText = (innerText.substr(innerText.length-1,1) == "_") ? innerText.substring(0,innerText.length-1) : innerText + title.substr(innerText.length,1) + "_";
	  		if(innerText.length > title.length){
	  			titleDiv.innerText = (innerText.substr(innerText.length-1,1) == "_") ? innerText.substring(0,innerText.length-1) : innerText;
	  			clearInterval(showTitle);
	  		}
	  	},75);
	  	
	  	setTimeout(function(){
		  	var showText = setInterval(function(){
		  		var innerText = textDiv.innerText;
		  		textDiv.innerText = (innerText.substr(innerText.length-1,1) == "_") ? innerText.substring(0,innerText.length-1) : innerText + text.substr(innerText.length,1) + "_"
		  		if(innerText.length > text.length){
		  			textDiv.innerText = (innerText.substr(innerText.length-1,1) == "_") ? innerText.substring(0,innerText.length-1) : innerText;
		  			clearInterval(showText);
		  		}
		  	},75);
	  	},1400);
  	
  </script>  
  </body>
</html>

效果如下图：