JAVASCRIPT+PHP+GB2312字库文件实现浏览器LED滚动效果

一、效果

二、源码

1、test_led.html

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MATRIX LED</title>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<canvas id="myCanvas" width="1900" height="900" style="border:0px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var LEDTEXT="秋夜长唐王勃秋夜长，殊未央，月明白露澄清光，层城绮阁遥相望。遥相望，川无梁，北风受节雁南翔，崇兰委质时菊芳。鸣环曳履出长廊，为君秋夜捣衣裳。纤罗对凤凰，丹绮双鸳鸯，调砧乱杵思自伤。思自伤，征夫万里戍他乡。鹤关音信断，龙门道路长。君在天一方，寒衣徒自香。";
var DELAY=500;					//延时时间ms
var onePoint=6;				//每一个点大小
var pointSpace=2;				//点之间的距离
var FGCOLOR="#00FF00";			//LED点亮色
var BGCOLOR="#006400";			//LED熄灭色
var TOTALCHARS;
var POINTSTYLE=0;				//0:方形；1：圆

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var matrix=new Array();
var temp=new Array(32);


ctx.shadowBlur=onePoint;		//阴影模糊级别
ctx.shadowColor="black";		//阴影颜色
	
function base64Encode(string) {
    // 将字符串转换为UTF-8编码的字节序列
    var utf8EncodedString = unescape(encodeURIComponent(string));
 
    // 调用btoa进行BASE64编码
    return btoa(utf8EncodedString);
}


function pixel(x,y,c)
{
	if(c==0)
	{
		ctx.fillStyle=FGCOLOR;		
		ctx.strokeStyle=FGCOLOR;
		if(POINTSTYLE==0)
		{
			ctx.fillRect(x*(onePoint+pointSpace),y*(onePoint+pointSpace),onePoint,onePoint);
		}else if(POINTSTYLE==1){
			ctx.beginPath(); // 开始新的路径  
			ctx.arc(x*2*(onePoint+pointSpace), y*2*(onePoint+pointSpace), onePoint, 0, 2 * Math.PI);  
			ctx.fill(); // 填充路径 
			ctx.closePath(); // 结束路径  
			ctx.stroke(); // 描边路径
			
		}

	}else
	{
		ctx.fillStyle=BGCOLOR;		
		ctx.strokeStyle=BGCOLOR;
		if(POINTSTYLE==0)
		{
			ctx.fillRect(x*(onePoint+pointSpace),y*(onePoint+pointSpace),onePoint,onePoint);
			
		}else if(POINTSTYLE==1){
			ctx.beginPath(); // 开始新的路径  
			ctx.arc(x*2*(onePoint+pointSpace), y*2*(onePoint+pointSpace), onePoint, 0, 2 * Math.PI);  
			ctx.fill(); // 填充路径 
			ctx.closePath(); // 结束路径  
			ctx.stroke(); // 描边路径
		}
	}
}

function shiftleft()
{
	for(i=0;i<32;i++)
	{
		temp[i]=matrix[i];
	}
	for(m=0;m<TOTALCHARS-1;m++)
	{
		for(i=0;i<32;i++)
		{
			matrix[m*32+i]=matrix[(m+1)*32+i];
		}
	}
	for(i=0;i<32;i++)
	{
		matrix[(TOTALCHARS-1)*32+i]=temp[i];
	}
}

function test_led(dat){


	var arr=dat.split(",");
	TOTALCHARS=arr.length/32;
	console.log(TOTALCHARS);
	for(i=0;i<arr.length;i++)
	{
		matrix[i]=parseInt(arr[i]);
	}
	setTimeout(
	function dispLED(){
		
		for(m=0;m<TOTALCHARS;m++)
			for(j=0;j<2;j++)
			{
			for(i=0;i<16;i++)
			{
				
					//console.log(matrix[j*10+i]);
					for(k=0;k<8;k++)
					{
						if((matrix[j*16+i+m*32]<<k)&0x80){
							pixel(i+m*16,j*8+k,0);
						}else{
							pixel(i+m*16,j*8+k,1);
						}
					}
					
				}
			}
		
		/*
		for(i=0;i<16;i++)
		{
		for(j=0;j<2;j++)
		{
			//console.log(matrix[j*10+i]);
			for(k=0;k<8;k++)
			{
				if((matrix[i*2+j+m*32]<<k)&0x80){
					pixel(j*8+k+m*16,i,0);
				}else{
					pixel(j*8+k+m*16,i,1);
				}
			}
			
		}
		}*/
		shiftleft();
		setTimeout(dispLED, DELAY); 
	}
	,DELAY);
}

$(document).ready(function(){

    $.ajax({  
        url: "http://127.0.0.1/demo_data.php",  
        type: "POST",  
        data: {text:base64Encode(LEDTEXT)}, // base64Encode  
        contentType: "application/x-www-form-urlencoded; charset=GB2312", // 设置请求的内容类型和字符集  
        success: function(data, status) { 
			console.log(data);
            test_led(data);  
        },  
        error: function(jqXHR, textStatus, errorThrown) {  
            console.error("请求失败: " + textStatus, errorThrown);  
        }  
    }); 	
});



</script>

</body>
</html>

2、demo_data.php

复制代码

<?php
$encodedString = isset($_POST['text']) ? htmlspecialchars($_POST['text']) : '没有获得输入';
$buffer_string = base64_decode($encodedString);
$buffer_string = iconv("UTF-8", "GB2312", $buffer_string);
$handle = fopen("gb2312_80_2.bin", "rb");
function bin_read($offset, &$buffer) // 注意这里的 &，表示通过引用传递变量
{
    global $handle;
    if ($handle) {
        fseek($handle, $offset, SEEK_SET);
        $binaryData = fread($handle, 32);
        $hexData = bin2hex($binaryData);
        $hexString = '0x' . implode(',0x', str_split($hexData, 2));
        $buffer = $hexString;
        
    } else {
        // 处理文件打开失败的情况
        $buffer = "File could not be opened";
    }
}

function getGBCodeFromEEPROM(&$buffer, $char) { // 注意这里的 &，表示通过引用传递变量
    if (strlen($char) !== 2) {
        // 处理非汉字字符或错误情况
        //$buffer = "Invalid character";
        return;
    }

    // 取高8位和低8位数据
    $GBH = ord($char[0]);
    $GBL = ord($char[1]);

    if ($GBH >= 0xb0) {
        $offset = (($GBH - 0xa7) * 94 + $GBL - 0xa1) * 32;
    } else {
        $offset = (($GBH - 0xa1) * 94 + $GBL - 0xa1) * 32;
    }
	//echo '<br>offset:'.$offset.'<br>';
    bin_read($offset, $buffer);
}

function prepareBuff($buffer_string) {
    $result = array(); // 使用数组来收集结果，而不是字符串连接
     for ($i = 0; $i < mb_strlen($buffer_string, 'GB2312'); $i++) {
        $char = mb_substr($buffer_string, $i, 1, 'GB2312'); // 获取一个完整的汉字
        $substring = ''; // 初始化子字符串
        getGBCodeFromEEPROM($substring, $char);
        $result[] = $substring; // 将结果添加到数组中
    }
    // 使用 implode 将数组元素连接成字符串，并以逗号分隔
    echo implode(',', $result);
}


prepareBuff($buffer_string);
fclose($handle);
?>

三、总结

1、支持对一些显示效果自定义：

var LEDTEXT="秋夜长唐王勃秋夜长，殊未央，月明白露澄清光，层城绮阁遥相望。遥相望，川无梁，北风受节雁南翔，崇兰委质时菊芳。鸣环曳履出长廊，为君秋夜捣衣裳。纤罗对凤凰，丹绮双鸳鸯，调砧乱杵思自伤。思自伤，征夫万里戍他乡。鹤关音信断，龙门道路长。君在天一方，寒衣徒自香。";

var DELAY=500; //延时时间ms

var onePoint=6; //每一个点大小

var pointSpace=2; //点之间的距离

var FGCOLOR="#00FF00"; //LED点亮色

var BGCOLOR="#006400"; //LED熄灭色

var TOTALCHARS;

var POINTSTYLE=0; //0:方形；1：圆

2、源码链接:

链接：https://pan.baidu.com/s/1leHDDG-Q4zbIiyefk0rfVA?pwd=i1hg

提取码：i1hg