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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/590664.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

VSCode连接远程服务器时卡在审核（check）log.txt和pid.txt

VSCode连接远程服务器时卡在审核（check）log.txt和pid.txt

诸神缄默不语-个人CSDN博文目录 VSCode就NM跟SB一样天天搁那儿更新&#xff0c;瞎JB更新&#xff0c;每次更新都要出一次兼容性问题&#xff0c;远程服务器不能连公网就上不去了&#xff0c;也没有显式提示&#xff0c;错误很明显就是在下载不了文件&#xff0c;用VSCode内置的…
阅读更多...
Xamarin.Android项目使用ConstraintLayout约束布局

Xamarin.Android项目使用ConstraintLayout约束布局

Xamarin.AndroidX.ConstraintLayout Xamarin.Android.Support.Constraint.Layout Xamarin.AndroidX.ConstraintLayout.Solver Xamarin.AndroidX.DataBinding.ViewBinding Xamarin.AndroidX.Legacy.Support.Core.UI Xamarin.AndroidX.Lifecycle.LiveData ![在这里插入图片描述]…
阅读更多...
【软件工程】需求分析

【软件工程】需求分析

目录 前言需求分析需求获取UML概述用例图用例图的组成用例图中的符号和含义包含的两种使用场景 用例图补充&#xff1a;“系统”用例模型建模确定系统参与者确定系统用例 用例文档用例文档组成部分 活动图组成元素初始节点和终点活动节点转换决策与分支、合并分岔与汇合 类图类…
阅读更多...
JavaScript：Web APIs（三）

JavaScript：Web APIs（三）

本篇文章的内容包括&#xff1a; 一&#xff0c;事件流 二&#xff0c;移除事件监听 三&#xff0c;其他事件 四&#xff0c;元素尺寸与位置 一&#xff0c;事件流 事件流是什么呢&#xff1f; 事件流是指事件执行过程中的流动路径。 我们发现&#xff0c;一个完整的事件执行…
阅读更多...
MySQL技能树学习——数据库组成

MySQL技能树学习——数据库组成

数据库组成&#xff1a; 数据库是一个组织和存储数据的系统&#xff0c;它由多个组件组成&#xff0c;这些组件共同工作以确保数据的安全、可靠和高效的存储和访问。数据库的主要组成部分包括&#xff1a; 数据库管理系统&#xff08;DBMS&#xff09;&#xff1a; 数据库管理系…
阅读更多...
围绕伦理困境进行深入讨论伦理困境分析与解决方案提出及个人反思

围绕伦理困境进行深入讨论伦理困境分析与解决方案提出及个人反思

遵循一般咨询伦理的六原则&#xff08;自主、有益、无害、公正、诚信、诚实&#xff09;对五个选项&#xff08;A 评估&#xff0c;B 收益&#xff0c;C 后果&#xff0c;D 责任&#xff0c;E 教育&#xff09;进行评估&#xff0c;可以得出以下结论&#xff1a; A. 评估&…
阅读更多...
数据结构与算法-单向环形链表与约瑟夫问题

数据结构与算法-单向环形链表与约瑟夫问题

1.简介 单向环形链表&#xff0c;闭合的形成一个环。 单向环形链表的一个应用场景是约瑟夫问题。 约瑟夫问题为&#xff1a;设编号为1&#xff0c;2&#xff0c;…&#xff0c;n的n个人围坐一圈&#xff0c;约定编号为k(1<k<n)的人从1开始报数&#xff0c;数到m的那个人…
阅读更多...
C语言-------实现贪吃蛇小游戏

C语言-------实现贪吃蛇小游戏

目录 一、预备知识 1.1 Win32 API介绍 Windows 这个多作业系统除了协调应用程序的执行、分配内存、管理资源之外&#xff0c; 它同时也是一个很大的服务中心&#xff0c;调用这个服务中心的各种服务&#xff08;每一种服务就是一个函数&#xff09;&#xff0c;可以帮应用程…
阅读更多...
如何在latex中使用第三方字体

如何在latex中使用第三方字体

最近想到一个问题&#xff1a;如何在 LaTeX \LaTeX LATE​X中使用第三方字体。 这个问题其实挺基础的&#xff0c;但是因为小白的 LaTeX \LaTeX LATE​X水平&#xff0c;应该说五六年了&#xff0c;毫无进步。 所以确实还是需要解决一下这个基础的问题。 小白最近使用的是TeXs…
阅读更多...
Python | Leetcode Python题解之第65题有效数字

Python | Leetcode Python题解之第65题有效数字

题目&#xff1a; 题解&#xff1a; from enum import Enumclass Solution:def isNumber(self, s: str) -> bool:State Enum("State", ["STATE_INITIAL","STATE_INT_SIGN","STATE_INTEGER","STATE_POINT","STATE_…
阅读更多...
基于 Spring Boot 博客系统开发（五）

基于 Spring Boot 博客系统开发（五）

基于 Spring Boot 博客系统开发&#xff08;五&#xff09; 本系统是简易的个人博客系统开发&#xff0c;为了更加熟练地掌握 SprIng Boot 框架及相关技术的使用。&#x1f33f;&#x1f33f;&#x1f33f; 基于 Spring Boot 博客系统开发&#xff08;四&#xff09;&#x1f…
阅读更多...
408数据结构-二叉树的概念、性质与存储结构 自学知识点整理

408数据结构-二叉树的概念、性质与存储结构 自学知识点整理

前置知识&#xff1a;树的基本概念与性质 二叉树的定义 二叉树是一种特殊的树形结构&#xff0c;其特点是每个结点至多只有两棵子树&#xff08;即二叉树中不存在度大于 2 2 2的结点&#xff09;&#xff0c;并且二叉树是有序树&#xff0c;左右子树不能互换。 与树类似&#…
阅读更多...
fastdfs安装

fastdfs安装

fastdfs安装步骤 一 、原理 FastDFS是一个开源的轻量级分布式文件系统&#xff0c;由跟踪服务器&#xff08;tracker server&#xff09;、存储服务器&#xff08;storage server&#xff09;和客户端&#xff08;client&#xff09;三个部分组成&#xff0c;主要解决了海量数…
阅读更多...
Flutter笔记：Widgets Easier组件库（10）快速处理承若型对话

Flutter笔记：Widgets Easier组件库（10）快速处理承若型对话

Flutter笔记 使用Widgets Easier组件库快速处理承若型对话 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://…
阅读更多...
光固化打印--问题记录

光固化打印--问题记录

平面翘起 原因&#xff1a;角度平&#xff0c;缺支持 解决&#xff1a; 45度角度摆放底部平面起皮 原因&#xff1a;缺少支撑&#xff0c;原始结构支持无法支撑平面。 解决&#xff1a;增加支撑
阅读更多...
【数学 排列组合】1643. 第 K 条最小指令

【数学 排列组合】1643. 第 K 条最小指令

本文涉及知识点 数学 排列组合 LeetCode1643. 第 K 条最小指令 Bob 站在单元格 (0, 0) &#xff0c;想要前往目的地 destination &#xff1a;(row, column) 。他只能向 右 或向 下 走。你可以为 Bob 提供导航 指令 来帮助他到达目的地 destination 。 指令 用字符串表示&am…
阅读更多...
Mybatis之Sqlsession、Connection和Transaction三者间的关系

Mybatis之Sqlsession、Connection和Transaction三者间的关系

前言 最近在看Mybatis的源码&#xff0c;搜到这篇文章Sqlsession、Connection和Transaction原理与三者间的关系&#xff0c;debug之后发现有不少疑惑&#xff0c;于是按照原文整理了一下&#xff0c;记录下debug中的一些困惑点。 对于我们开发来讲&#xff0c;不管跟任何关系…
阅读更多...
2024五一数学建模C题完整论文讲解（含完整python代码及几十个特征表、处理表、结果表）

2024五一数学建模C题完整论文讲解（含完整python代码及几十个特征表、处理表、结果表）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024五一数学建模C题煤矿深部开采冲击地压危险预测完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 C题论文…
阅读更多...
【Docker学习】docker version查看版本信息

【Docker学习】docker version查看版本信息

就像很多应用一样&#xff0c;docker也使用version来查看版本信息。但因为docker包含有不少独立组件&#xff0c;version的作用范围会更广一些。 用法1&#xff1a; docker --version 描述&#xff1a; 输出安装的Docker CLI 的版本号。关于Docker CLI&#xff0c;请访问。 实操…
阅读更多...
数字电路-5路呼叫显示电路和8路抢答器电路

数字电路-5路呼叫显示电路和8路抢答器电路

本内容涉及两个电路&#xff0c;分别为5路呼叫显示电路和8路抢答器电路&#xff0c;包含Multisim仿真原文件&#xff0c;为掌握FPGA做个铺垫。紫色文字是超链接&#xff0c;点击自动跳转至相关博文。持续更新&#xff0c;原创不易&#xff01; 目录&#xff1a; 一、5路呼叫显…
阅读更多...
最新文章

Copyright @ 2022~2023