手机LED---点阵字体实现

最新推荐文章于 2025-07-13 09:43:07 发布

weixin_33966095

最新推荐文章于 2025-07-13 09:43:07 发布

阅读量723

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 python

原文链接：https://my.oschina.net/lightled/blog/1925313

本文介绍了一种使用HTML和JavaScript实现滚动字幕特效的方法，并提供了三种不同版本的代码示例，包括基本版、定制版及高级定制版，允许用户自定义字体大小、颜色等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

先来个封面图》

1 基本版

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8"/>
	<style>
	table tr td{
		width:10px;
		height:10px;
		background-color:white;
	}
	td.red{
		background-color:red;
	}
	td.black{
		background-color:#FDF9F2;
	}
	</style>
</head>
<body bgcolor="black" >
<canvas id="word"  style="outline:0px solid black;">不支持</canvas>
<div align="center"  >
	
 
   <div id="container"></div>
</div>
<script>

var cav = document.getElementById("word");
var fontSize = 16;

var str ="大家好，我系渣渣辉!";
cav.width = fontSize*str.length;
cav.height = fontSize;
var cxt = cav.getContext("2d");
cxt.font=fontSize+"px 宋体";
cxt.textAlign="left";
cxt.fillStyle = "red";
cxt.textBaseline="top";
cxt.fillText(str,0,0);
var imgdata = cxt.getImageData(0,0,cav.width,cav.height);
var data = imgdata.data;
 var pixs = [];
 for(var i=0;i<imgdata.height;i++){
	 pixs[i]=[];
	 for(var j=0;j<imgdata.width;j++){
		pixs[i][j]=0;
	}
 }

function loadimg(){
   for(var i=0;i<imgdata.width*imgdata.height;i++){
	   var r = parseInt(i/imgdata.width);
	   var c = i%imgdata.width;
	   var color = data[4*i+0]*65536 + data[4*i+1]*256 + data[4*i+2];
	   if(   color >0 ){
			 pixs[r][c]=1;
	   }else{
			pixs[r][c]=0;
	   }
    }
}
var alltds = [];
var showwidth = 28;
function initTable(){
	var tb = document.createElement("table");
	for(var i=0;i<fontSize;i++){
		var tr = document.createElement("tr");
		alltds[i]=[];
		for(var j=0;j<showwidth;j++){
			var td = document.createElement("td");
			alltds[i][j]= td;
			tr.appendChild(td);
		}
		tb.appendChild(tr);
	}
	document.getElementById("container").appendChild(tb);
}

var offset =-showwidth;
function initWorld(){
	
	for(var i=0;i<alltds.length;i++){//行 
		var tds = alltds[i];
		var rowdatas = pixs[i];//行数据。
		for(var j=0;j<tds.length;j++){//列
			 var td = tds[j];
			 var value = rowdatas[ j + offset ];
			  td.className = "black";
			 if(!value)continue;
			 
			 if(value){
				td.className = "red";
			 }
		} 
	}
	if( offset == rowdatas.length){
		offset = -showwidth;
	} 
	offset++;
	setTimeout(arguments.callee,20);
}
loadimg();
initTable();
initWorld();
</script>
</body>
</html>

2 定制版

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" >
	<style>
	table tr td{
		background-color:white;
	}
	 
	#controller{
		position:fixed;
		left:0px;
		bottom:50px;
		width:50px;
		height:35px;
		border-radius:25px;
		background-color:rgba(123,123,123,0.15);
		color:white;
		text-align:center;
		padding-top:15px;
	}
	#toolsbtn{
	    position:fixed;
		left:0px;
		bottom:0px;
		width:100%;
		height:50px;
		background-color:white;
	}
	</style>
</head>
<body bgcolor="black"  >
<canvas id="word"  hidden style="outline:0px solid black;">不支持</canvas>
<div align="center"  >
   <div id="container"></div>
</div>

<div id="controller">设置</div>
<div id="toolsbtn" hidden>
	<font>字体</font><select id="fontContainer"></select>
	<font>速度</font><input id="speedInput" value="100" style="width:50px;">ms
	<font>点阵宽高</font>
					<select id="fontWidth"  >	
								<option value="10">10*10</option>
								<option value="5">5*5</option>
								<option value="15">15*15</option>
								<option value="20">20*20</option>
					</select>(px)
	<font>内容</font><input id="contentInput" value="大家好，我是渣渣辉。"  >
	<font>字体颜色</font>RGB <input class="fontColor" type="number" value="255"  style="width:60px" placeholder="0~255" />
							 <input class="fontColor" type="number"  value="0" style="width:60px" placeholder="0~255" />
							 <input class="fontColor" type="number"  value="0" style="width:60px" placeholder="0~255" />
							 <button id="changeFontColorBtn">确定</button>
							 
	<font>字体背景颜色</font>RGB <input class="fontbgColor" type="number" value="255"  style="width:60px" placeholder="0~255" />
							 <input class="fontbgColor" type="number"  value="255" style="width:60px" placeholder="0~255" />
							 <input class="fontbgColor" type="number"  value="255" style="width:60px" placeholder="0~255" />
							 <button id="changeFontBgColorBtn">确定</button>			
							
</div>
<script>
var LED={ 
	font:{
		fontSize:16,//默认尺寸
		fontFamily:"宋体",
		selectFamily:["宋体","微软雅黑","仿宋"],
		selectSize:[16,18,20,22,24,26,28,30,32,48,72],
		color:"red",
		fontWidth:10, //默认点阵的宽高尺寸。通过切换class改变。
		bgcolor:"white" //字体背景颜色。
	},
	block:{//格子。
		width:10,
		height:10,
		color:"black",
		totalWidth:30,
		totalHeight:16,
		speed:50
	},
	device:{
		w:0,
		h:0
	},
	txt:{//文字。
		content:"大家好，我系渣渣辉。这四里从未玩过的游戏。"
	},
	tds:[],
	pixs:[],
	offset:0,
	showCtrl:false,//展示控制按钮。停止画面。
	T:null,
	initFont:function(){
		var select = document.getElementById("fontContainer");
		for(var i=0;i<this.font.selectSize.length;i++){
			var option = document.createElement("option");
			option.value = this.font.selectSize[i];
			option.innerHTML = option.value; 
			select.appendChild(option);
		} 
	},
	initData:function(){//step1 
		this.block.totalWidth = parseInt( window.screen.width/this.block.width );
		this.block.totalHeight = this.font.fontSize;
		this.offset = - this.block.totalWidth;
		
	},
	initCanvas:function(){//step2
		
		var cav = document.getElementById("word");
		 
		cav.width = this.font.fontSize*this.txt.content.length;
	    cav.height = this.font.fontSize;
		
		var cxt = cav.getContext("2d");
		
		cxt.clearRect(0,0,cav.width , cav.height);//全部清除。
		
		cxt.font=this.font.fontSize+"px "+this.font.fontFamily;
		cxt.textAlign="left";
		cxt.fillStyle = "red";
		cxt.textBaseline="top";
		cxt.fillText(this.txt.content,0,0);
		
		var imgdata = cxt.getImageData(0,0,cav.width,cav.height);
		var data = imgdata.data;
		for(var i=0;i<imgdata.height;i++){
			 this.pixs[i]=[];
			 for(var j=0;j<imgdata.width;j++){
				this.pixs[i][j]=0;
				
			}
		}
		
		for(var i=0;i<imgdata.width*imgdata.height;i++){
		   var r = parseInt(i/imgdata.width);
		   var c = i%imgdata.width;
		   var color = data[4*i+0]*65536 + data[4*i+1]*256 + data[4*i+2];
		   if(   color >0 ){
				 this.pixs[r][c]=1;
		   }else{
				 this.pixs[r][c]=0;
		   }
		}
		
	},
	initTable:function(){ // step3 
		var con = document.getElementById("container");
		con.innerHTML = "";//清空。
		var tb = document.createElement("table");
		for(var i=0;i<this.block.totalHeight;i++){
			var tr = document.createElement("tr");
			this.tds[i]=[];
			for(var j=0;j<this.block.totalWidth;j++){
				var td = document.createElement("td");
				td.width=this.font.fontWidth+"px";
				td.height = td.width;
				this.tds[i][j]= td;
				tr.appendChild(td);
			}
			tb.appendChild(tr);
		}
		con.appendChild(tb);
	},
	showWords: function (){//stp4
		if(LED.showCtrl)return;
		for(var i=0;i<LED.tds.length;i++){//行 
			var tds = LED.tds[i];
			var rowdatas = LED.pixs[i];//行数据。
			for(var j=0;j< tds.length;j++){//列
				 var td = tds[j];
				 var value = rowdatas[ j + LED.offset ];
				 td.style.backgroundColor = LED.font.bgcolor;
				 if(!value)continue;
				 if(value){
					 td.style.backgroundColor = LED.font.color;
				 }
			} 
		}
		if( LED.offset == rowdatas.length){
			LED.offset = -LED.block.totalWidth;
		} 
		LED.offset++;
		LED.T = setTimeout(arguments.callee,LED.block.speed);
	},
	reload: function reload(){//只要修改了一个参数。就需要重新加载。
		LED.initData();
		LED.initCanvas();
		LED.initTable();
		LED.showWords();
	},
	bindEvent:function(){
		document.getElementById("controller").onclick=function(e){
				LED.showCtrl = ! LED.showCtrl;
				var toolbar = document.getElementById("toolsbtn");
				if(LED.showCtrl){//显示菜单。
					clearTimeout(LED.T);
					toolbar.removeAttribute("hidden");
					e.target.innerHTML ="保存";
				}else{//隐藏菜单。
					toolbar.setAttribute("hidden","");
				    LED.showWords();
					e.target.innerHTML ="设置";
				}
		}
		document.getElementById("fontContainer").onchange=function(e){//改变字体。
			LED.font.fontSize = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("speedInput").onchange=function(e){
			LED.block.speed = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("fontWidth").onchange=function(e){
			LED.font.fontWidth = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("contentInput").onchange=function(e){
			LED.txt.content =  e.target.value; 
			LED.reload();
		}
		document.getElementById("changeFontColorBtn").onclick=function(e){
			var NS = document.querySelectorAll("input.fontColor[type=number]");
			LED.font.color  = "rgb("+NS[0].value+","+NS[1].value+","+NS[2].value+")";
			LED.reload();
		}
		
		document.getElementById("changeFontBgColorBtn").onclick=function(e){
			var NS = document.querySelectorAll("input.fontbgColor[type=number]");
			LED.font.bgcolor  = "rgb("+NS[0].value+","+NS[1].value+","+NS[2].value+")";
			LED.reload();
		}
		    
	}
};


LED.initFont();//初始化字体。一次即可。

LED.initData();
LED.initCanvas();
LED.initTable();
LED.showWords();
LED.bindEvent();

</script>
</body>
</html>

3 高级定制版

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8"/>
	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" >
	<style>
	body{
		margin: 0 auto;
	}
	table{
		border-collapse:collapse;
	}
	table tr td{
		background-color:white;
		border:1px solid #333333;
	}
	 
	#controller{
		position:fixed;
		left:0px;
		bottom:100px;
		width:50px;
		height:35px;
		border-radius:25px;
		background-color:rgba(123,123,123,0.15);
		color:white;
		text-align:center;
		padding-top:15px;
	}
	#toolsbtn{
	    position:fixed;
		left:0px;
		bottom:0px;
		width:100%;
		height:100px;
		background-color:white;
	}
	</style>
</head>
<body bgcolor="black"  >
<canvas id="word"  hidden style="outline:0px solid black;">不支持</canvas>
<div align="center"  >
   <div id="container"></div>
</div>

<div id="controller">设置</div>
<div id="toolsbtn" hidden>
	<font>字体</font><select id="fontContainer"></select>
	<font>速度</font><input id="speedInput" value="30" style="width:50px;">ms
	<font>点阵宽高</font>
					<select id="fontWidth"  >	
								<option value="5">5*5</option>
								<option value="8">8*8</option>
								<option value="10">10*10</option>
								<option value="15">15*15</option>
								<option value="20">20*20</option>
					</select>(px)
	<font>内容</font><input id="contentInput" value="大家好，我是渣渣辉。"  >
	<font>字体颜色</font>RGB <input class="fontColor" type="number" value="255"  style="width:60px" placeholder="0~255" />
							 <input class="fontColor" type="number"  value="255" style="width:60px" placeholder="0~255" />
							 <input class="fontColor" type="number"  value="255" style="width:60px" placeholder="0~255" />
							 <button id="changeFontColorBtn">确定</button>
							 
	<font>字体背景颜色</font>RGB <input class="fontbgColor" type="number" value="33"  style="width:60px" placeholder="0~255" />
							 <input class="fontbgColor" type="number"  value="33" style="width:60px" placeholder="0~255" />
							 <input class="fontbgColor" type="number"  value="33" style="width:60px" placeholder="0~255" />
							 <button id="changeFontBgColorBtn">确定</button>			
							
</div>
<script>
var LED={ 
	font:{
		fontSize:32,//默认尺寸
		fontFamily:"宋体",
		selectFamily:["宋体","微软雅黑","仿宋"],
		selectSize:[16,18,20,22,24,26,28,30,32,36,48,72],
		color:"white",
		fontWidth:8, //默认点阵的宽高尺寸。通过切换class改变。
		bgcolor:"rgb(33,33,33)" //字体背景颜色。
	},
	block:{//格子。
		height:10,
		color:"black",
		totalWidth:35,
		totalHeight:16,
		speed:30
	},
	txt:{//文字。
		content:"本周票房冠军<<林正英之九叔归来>>，51大放\"价\"。android智能5.0寸手机只卖998! 汪峰!摇滚加油！"
	},
	tds:[],
	pixs:[],
	offset:0,
	showCtrl:false,//展示控制按钮。停止画面。
	T:null,
	initFont:function(){
		var select = document.getElementById("fontContainer");
		for(var i=0;i<this.font.selectSize.length;i++){
			var option = document.createElement("option");
			option.value = this.font.selectSize[i];
			option.innerHTML = option.value; 
			select.appendChild(option);
		} 
	},
	initData:function(){//step1 
		this.block.totalWidth = parseInt( window.screen.width/this.font.fontWidth );
		this.block.totalHeight = this.font.fontSize;
		this.offset = - this.block.totalWidth;
		
	},
	initCanvas:function(){//step2
		
		var cav = document.getElementById("word");
		 
		cav.width = this.font.fontSize*this.txt.content.length;
	    cav.height = this.font.fontSize;
		
		var cxt = cav.getContext("2d");
		
		cxt.clearRect(0,0,cav.width , cav.height);//全部清除。
		
		cxt.font=this.font.fontSize+"px "+this.font.fontFamily;
		cxt.textAlign="left";
		cxt.fillStyle = "red";
		cxt.textBaseline="top";
		cxt.fillText(this.txt.content,0,0);
		
		var imgdata = cxt.getImageData(0,0,cav.width,cav.height);
		var data = imgdata.data;
		for(var i=0;i<imgdata.height;i++){
			 this.pixs[i]=[];
			 for(var j=0;j<imgdata.width;j++){
				this.pixs[i][j]=0;
				
			}
		}
		
		for(var i=0;i<imgdata.width*imgdata.height;i++){
		   var r = parseInt(i/imgdata.width);
		   var c = i%imgdata.width;
		   var color = data[4*i+0]*65536 + data[4*i+1]*256 + data[4*i+2];
		   if(   color >0 ){
				 this.pixs[r][c]=1;
		   }else{
				 this.pixs[r][c]=0;
		   }
		}
		
	},
	initTable:function(){ // step3 
		var con = document.getElementById("container");
		con.innerHTML = "";//清空。
		var tb = document.createElement("table");
		for(var i=0;i<this.block.totalHeight;i++){
			var tr = document.createElement("tr");
			this.tds[i]=[];
			for(var j=0;j<this.block.totalWidth;j++){
				var td = document.createElement("td");
				td.width=this.font.fontWidth+"px";
				td.height = td.width;
				this.tds[i][j]= td;
				tr.appendChild(td);
			}
			tb.appendChild(tr);
		}
		con.appendChild(tb);
	},
	showWords: function (){//stp4
		if(LED.showCtrl)return;
		for(var i=0;i<LED.tds.length;i++){//行 
			var tds = LED.tds[i];
			var rowdatas = LED.pixs[i];//行数据。
			for(var j=0;j< tds.length;j++){//列
				 var td = tds[j];
				 var value = rowdatas[ j + LED.offset ];
				 td.style.backgroundColor = LED.font.bgcolor;
				 if(!value)continue;
				 if(value){
					 td.style.backgroundColor = LED.font.color;
				 }
			} 
		}
		if( LED.offset == rowdatas.length){
			LED.offset = -LED.block.totalWidth;
		} 
		LED.offset++;
		LED.T = setTimeout(arguments.callee,LED.block.speed);
	},
	reload: function reload(){//只要修改了一个参数。就需要重新加载。
		LED.initData();
		LED.initCanvas();
		LED.initTable();
		LED.showWords();
	},
	bindEvent:function(){
		document.getElementById("controller").onclick=function(e){
				LED.showCtrl = ! LED.showCtrl;
				var toolbar = document.getElementById("toolsbtn");
				if(LED.showCtrl){//显示菜单。
					clearTimeout(LED.T);
					toolbar.removeAttribute("hidden");
					e.target.innerHTML ="保存";
				}else{//隐藏菜单。
					toolbar.setAttribute("hidden","");
				    LED.showWords();
					e.target.innerHTML ="设置";
				}
		}
		document.getElementById("fontContainer").onchange=function(e){//改变字体。
			LED.font.fontSize = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("speedInput").onchange=function(e){
			LED.block.speed = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("fontWidth").onchange=function(e){
			LED.font.fontWidth = parseInt( e.target.value ); 
			LED.reload();
		}
		document.getElementById("contentInput").onchange=function(e){
			LED.txt.content =  e.target.value; 
			LED.reload();
		}
		document.getElementById("changeFontColorBtn").onclick=function(e){
			var NS = document.querySelectorAll("input.fontColor[type=number]");
			LED.font.color  = "rgb("+NS[0].value+","+NS[1].value+","+NS[2].value+")";
			LED.reload();
		}
		
		document.getElementById("changeFontBgColorBtn").onclick=function(e){
			var NS = document.querySelectorAll("input.fontbgColor[type=number]");
			LED.font.bgcolor  = "rgb("+NS[0].value+","+NS[1].value+","+NS[2].value+")";
			LED.reload();
		}
		    
	}
};


LED.initFont();//初始化字体。一次即可。

LED.initData();
LED.initCanvas();
LED.initTable();
LED.showWords();
LED.bindEvent();

 
</script>
</body>
</html>

转载于:https://my.oschina.net/lightled/blog/1925313