1. IT分享知识网首页
  2. 开发框架
  3. HTML

html5 canvas实现led样式数字字体

老牧童 • • HTML • 阅读 143

html5 canvas实现led样式数字字体使用H5的canvas实现led样式的数字字体前言之前也有不使用canvas就实现led样式灯的效果；代码比较复杂，而且会大量操作dom；使用canvas与不使用canvas实现各有优势；不使用canvas实现那种效果比较清晰，放大缩小内容不会模糊。如果想要了解不使用canvas实现的方式可以看我上一篇文章…

大家好，欢迎来到IT知识分享网。

使用H5的canvas实现led样式的数字字体

示例图
在这里插入图片描述带:的效果。注意：这里不发光灯光我使用的透明度为0.2.所以看上去不发光部分不太好看，这里根据自己实际需求调整即可。

前言

之前也有不使用canvas就实现led样式灯的效果；代码比较复杂，而且会大量操作dom；使用canvas与不使用canvas实现各有优势；不使用canvas实现那种效果比较清晰，放大缩小内容不会模糊。如果想要了解不使用canvas实现的方式可以看我上一篇文章：不使用canvas实现方式的链接

实现代码

以下代码使用了es6语法，如果项目不支持es6请自己稍加修改，使用带es6语法的部分并不多

/* * selector：需要生成led样式容器的选择器；例 #testId * options：参数对象 options: { color:red,-- led灯的颜色，默认orange width:100,-- led灯的宽度，默认50 height:200,-- led灯的高度，默认100 values:-123.4,-- led需要显示的值，默认0 lineWidth:5,--led灯的线宽，默认5 italics:10 --倾斜角度，默认0 opacity:0.1 --led不发光时的透明度，默认0.1（0<=opacity<1。注意不透明度请不要写1.否则全显示8） } */
let ledSetValue = function(selector,options = { 
   }){ 
   
		if(options == null)options = { 
   };
		// options各属性初始值
		let { 
   color="orange",width=50,height=100,values=0,lineWidth=5,italics=0,opacity=0.1} = options;
		//判断传入值是否为“0-9”、“.”、“-”、“:”四种类型
		if(! /^[\d.\-:]*$/.test(values.toString())){ 
   
			alert("传入内容只能为“0-9”、“.”、“-”、“:”四种类型的值")
		}
		
		let valuesArr = values.toString().split("");
		let commaCount = values.toString().match(/\.|:/g) == null?0:values.toString().match(/\.|:/g).length;
		let divWidth = (valuesArr.length - commaCount) * width + (valuesArr.length - commaCount-1)*lineWidth*0.5 + (width*0.5 - 0.5*lineWidth)*commaCount;
		//生成一个随机数，该数用来作为canvas画板的id
		let random = 'canvas' + new Date().getTime().toString() + Math.random().toString().substring(0, 6).replace(/\./g, '');
		let html = `<canvas id="${ 
     random}" width="${ 
     divWidth}" height="${ 
     height}" style="transform:skewX(${ 
     italics + 'deg'})"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas>`;
		
		document.querySelector(selector).innerHTML = html;
		let c=document.querySelector("#"+random);
		
		let ctx=c.getContext("2d");
		ctx.lineWidth=lineWidth;
		ctx.strokeStyle = color;
		
		let distanceLeft = 0;
		for(let i=0;i<valuesArr.length;i++){ 
   
			let styleLed = setNumber(valuesArr[i],opacity);
			
			if(valuesArr[i] != "." && valuesArr[i] != ":"){ 
   
				ctx.lineCap="round";
				//七段数码管第一段（关于七段数码管详情请百度）
				ctx.beginPath();
				ctx.globalAlpha = styleLed[0];
				ctx.moveTo(1.5*lineWidth + distanceLeft,0.5*lineWidth);
				ctx.lineTo(width - 1.5*lineWidth + distanceLeft,0.5*lineWidth);
				ctx.stroke();
				//七段数码管第二段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[1];
				ctx.moveTo(width - 0.5*lineWidth + distanceLeft,1.5*lineWidth);
				ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height/2 - lineWidth);
				ctx.stroke();
				//七段数码管第三段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[2];
				ctx.moveTo(width - 0.5*lineWidth + distanceLeft,height/2 + lineWidth);
				ctx.lineTo(width - 0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
				ctx.stroke();
				//七段数码管第四段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[3];
				ctx.moveTo(1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
				ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height  - 0.5*lineWidth);
				ctx.stroke();
				//七段数码管第五段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[4];
				ctx.moveTo(0.5*lineWidth + distanceLeft,height/2 + lineWidth);
				ctx.lineTo(0.5*lineWidth + distanceLeft,height  - 1.5*lineWidth);
				ctx.stroke();
				//七段数码管第六段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[5];
				ctx.moveTo(0.5*lineWidth + distanceLeft,1.5*lineWidth);
				ctx.lineTo(0.5*lineWidth + distanceLeft,height/2 - lineWidth);
				ctx.stroke();
				//七段数码管第七段
				ctx.beginPath();
				ctx.globalAlpha = styleLed[6];
				ctx.moveTo(1.5*lineWidth + distanceLeft,height/2);
				ctx.lineTo(width - 1.5*lineWidth + distanceLeft,height/2);
				ctx.stroke();
				
				distanceLeft += width + 0.5*lineWidth;
			}else if(valuesArr[i] == ":"){ 
   
				ctx.beginPath();
				ctx.lineCap="square";
				ctx.globalAlpha = 1;
				ctx.moveTo(0.25*width - 0.5*lineWidth + distanceLeft,0.3*height - lineWidth);
				ctx.lineTo(0.25*width - 0.5*lineWidth  + distanceLeft,0.3*height - lineWidth);
				
				ctx.moveTo(0.25*width - 0.5*lineWidth + distanceLeft,0.7*height + lineWidth);
				ctx.lineTo(0.25*width - 0.5*lineWidth  + distanceLeft,0.7*height + lineWidth);
				ctx.stroke();
				distanceLeft += 0.5*width - 0.5*lineWidth;
			}else{ 
   
				ctx.beginPath();
				ctx.lineCap="square";
				ctx.globalAlpha = 1;
				ctx.moveTo(0.25*width - 0.5*lineWidth + distanceLeft,height - lineWidth);
				ctx.lineTo(0.25*width - 0.5*lineWidth  + distanceLeft,height - lineWidth);
				ctx.stroke();
				distanceLeft += 0.5*width - 0.5*lineWidth;
			}
		}
		/* *设置单个数字的值的方法 *number：传入单个数字的值 *opacity：设置led不亮部分的透明度，此处默认为0.1，但是如果需要调整请在调用此方法的地方输入透明度 */
		function setNumber(number,opacity){ 
   
			let styleLed = [];
			switch(number.toString()) { 
   
				case '0':
					styleLed = [1,1,1,1,1,1,opacity];
					break;
				case '1':
					styleLed = [opacity,1,1,opacity,opacity,opacity,opacity];
					break;
				case '2':
					styleLed = [1,1,opacity,1,1,opacity,1];
					break;
				case '3':
					styleLed = [1,1,1,1,opacity,opacity,1];
					break;
				case '4':
					styleLed = [opacity,1,1,opacity,opacity,1,1];
					break;
				case '5':
					styleLed = [1,opacity,1,1,opacity,1,1];
					break;
				case '6':
					styleLed = [1,opacity,1,1,1,1,1];
					break;
				case '7':
					styleLed = [1,1,1,opacity,opacity,opacity,opacity];
					break;
				case '8':
					styleLed = [1,1,1,1,1,1,1];
					break;
				case '9':
					styleLed = [1,1,1,1,opacity,1,1];
					break;
				case '-':
					styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,1];
					break;
				default:
					styleLed = [opacity,opacity,opacity,opacity,opacity,opacity,opacity];
					break;
			}
			return styleLed;
		}
		
	}
	
// 调用方式 
// options里面的参数都可以不传，那么就会显示一个橙色的0，各种属性根据实际情况配置
// ledSetValue("#test",{color:null,width:50,height:110,values:"-51.2122.12.3.5454.9.8.73.",lineWidth:5,italics:-10,opacity:0.2});
// ledSetValue("#test1",{color:"red",width:20,height:45,values:"-323.343.254",lineWidth:3,italics:0});

调用方式

先把上面的代码封装为js文件，然后引入；如下，我把上面的代码封装为名称为ledStyleCanvas.js的文件，然后引入页面即可使用；只能传入数字类型

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<!-- 把上面的代码封装为js文件，然后引入即可使用 -->
	<script src="js/common/ledStyleCanvas.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<h2>颜色为天空蓝、每个数字的单个宽度为100px、高度为220px、值为-43.44344、字体的粗细为10px；向右倾斜10度</h2>
		<div id="test1" ></div>
		<h2>颜色为蓝色、每个数字的单个宽度为75px、高度为145px、值为123456789.1234、字体的粗细为7px；向右倾斜0度</h2>
		<div id="test2" ></div>
		<h2>颜色为灰色、每个数字的单个宽度为60px、高度为60px、值为743541.3222、字体的粗细为5px；向左倾斜20度</h2>
		<div id="test3" ></div>
	</body>
	<script>
		//颜色为天空蓝、每个数字的单个宽度为100px、高度为220px、值为-43.44344、字体的粗细为10px；向右倾斜10度
		ledSetValue("#test1",{ 
   
			color:"skyblue",
			width:100,
			height:220,
			values:"-43.44344",
			lineWidth:10,
			italics:-10
		});
		//颜色为蓝色、每个数字的单个宽度为75px、高度为145px、值为123456789.1234、字体的粗细为7px；向右倾斜0度
		ledSetValue("#test2",{ 
   
			color:"blue",
			width:70,
			height:145,
			values:"123456789.1234",
			lineWidth:7,
			italics:0,
			opacity:0.1
		});
		//颜色为灰色、每个数字的单个宽度为60px、高度为60px、值为743541.3222、字体的粗细为5px；向左倾斜20度
		ledSetValue("#test3",{ 
   
			color:"gray",
			width:60,
			height:60,
			values:"743541.3222",
			lineWidth:5,
			italics:20
		});
	</script>
</html>

options的参数请根据自己实际情况传递，默认值请看代码前的注释内容

如下是效果图

在这里插入图片描述
新增支持“:”的展示

<h1>颜色为查特酒绿、每个数字的单个宽度为80px、高度为160px、值为（.8--:0:324:12.）、字体粗细为10px、不发光管脚的透明度为0.2、向右倾斜12度</h1>
<div id="test1"></div>

ledSetValue("#test1",{ 
   
	width:80,
	height:160,
	lineWidth:10,
	italics:-12,
	color:"#7FFF00",
	values: ".8--:0:324:12.",
	opacity:0.2,
});

在这里插入图片描述

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/9948.html

赞 (0)
老牧童老牧童
0
上一篇 2024-04-04 15:00
下一篇 2024-04-10 19:00

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信