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

示例图

前言

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

实现代码

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

/** selector：需要生成led样式容器的选择器；例  #testId* options：参数对象options: {color:red,-- led灯的颜色，默认orangewidth:100,-- led灯的宽度，默认50height:200,-- led灯的高度，默认100values:-123.4,-- led需要显示的值，默认0lineWidth:5,--led灯的线宽，默认5italics:10 --倾斜角度，默认0opacity: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画板的idlet 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,
});

html5 canvas实现led样式数字字体相关推荐

html前端实现led样式数字的效果（数码管效果展示数据）
前端实现led样式数字的效果前言效果图实现代码使用方式 html代码该工具类使用面向对象的思想来实现该功能:而我认为每一个数字是应该对象,即"123"是应该对象,&quo ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
canvas中文显示乱码 html5_浅析HTML5 Canvas的几种中文字体缩小方案
Canvas留下的坑远比我想象中的要多, 最近碰上一个很少见的需求--在Canvas上绘制大小小于12px的文字. 如果只是简单的去设定context的font属性, 来绘制点阵字体, 比如7px的宋 ...
图片涂鸦html插件,HTML5 canvas 在线涂鸦
插件地址采用技术 jq-signature.min.js Developed using jQuery 2.1.4. Insert title here $(function(){ $('.js-s ...
html5 canvas文本,html5 canvas文本处理
html5 canvas文本处理 window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded ...
html5显示字母的值,使用HTML5 Canvas API控制字体的显示与渲染的方法
今天我们开始征战一个全新的内容--HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字.是不是很有意思? 好了,先预告一下Canvas 文 ...
html获取随机字母,html5 canvas随机生成英文字母数字组合图片验证码代码
简单又实用的html5 canvas随机生成英文字母数字组合图片验证码代码,点击验证码图片可更换一组,还可随意修改验证码的内容,样式. 查看演示下载资源: 27 次下载资源下载积分: 20 积分 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
html5文本设置字体大小,HTML5 Canvas的文本设置字体和大小
网页制作文章简介:HTML5 Canvas的文本设置字体和大小. HTML5 Canvas的文本设置字体和大小,我们可以使用的字体在画布范围内的属性. 下面我们就做一个简单的实例为大家讲解下,基本语法 ...

html5 canvas实现led样式数字字体