使用H5的canvas实现led样式的数字字体
示例图
前言
之前也有不使用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,
});
扫一扫
3573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
