在数字显示技术中，七段显示器因其简洁而广受欢迎。但如果想要更丰富的表现力，十六段显示器无疑是一个不错的选择。十六段显示器不仅外观时尚，还能显示包括字母和标点在内的更广泛的字符。本文将介绍如何使用HTML5Canvas技术创建一个完全可定制和可扩展的十六段显示器。
可以通过访问GitHub仓库下载源代码，或者查看演示页面来获取实时示例。
首先，需要下载代码并将脚本包含在网页中。要在页面上添加一个十六段显示器，创建一个新的SixteenSegment对象，并将Canvas和显示元素的数量作为参数传递给构造函数。Canvas参数是唯一必需的参数。还可以传递其他参数来自定义显示，但它们都有默认值。
<canvas id="c" width="600" height="250"></canvas>
<script src="segment.min.js"></script>
<script>
var canvas = document.getElementById("c");
var segment16 = new SixteenSegment(canvas, 6);
segment16.DisplayText("Hello World");
</script>
默认情况下，显示器的宽度和高度将与Canvas相等。这很方便，因为显示器会自动填充Canvas区域，可以通过HTML和CSS控制元素的尺寸。如果想明确设置显示器的尺寸，可以手动设置这些属性。
var segment16 = new SixteenSegment(canvas, 4, 200, 100);
var segment16 = new SixteenSegment(canvas, 4);
segment16.Width = 200;
segment16.Height = 100;
显示器默认为标准的十六段显示器外观，如果觉得这样已经足够好，那么可以直接使用。但如果想要一个看起来略有不同的显示器，可以通过几个属性来自定义外观。演示页面允许尝试不同的设置，看看它们如何影响显示器的渲染。可以通过下载源代码或查看实时示例来进行尝试。
var segment = new SixteenSegment(canvas, 6);
segment.SegmentWidth = 0.16;
segment.SegmentInterval = 0.05;
segment.BevelWidth = 0.06;
segment.SideBevelEnabled = false;
segment.FillLight = "#86fd06";
segment.FillDark = "#004400";
segment.StrokeLight = "#007700";
segment.StrokeDark = "#440044";
segment.LineWidth = 0;
segment.Padding = 10;
segment.Spacing = 5;
segment.X = 0;
segment.Y = 0;
segment.Width = 200;
segment.Height = 100;
字符通过CharacterMasks属性映射到显示模式。这个属性是一个查找对象，它保存了按字符索引的显示模式。显示模式描述了应该打开哪些段。这些信息以16位数字的形式编码为掩码，每个段一个位。1表示应该打开该段，0表示应该关闭该段。
var charMasks = SixteenSegment.prototype.CharacterMasks;
charMasks["A"] = a1 | a2 | b | c | g1 | g2 | e | f;
charMasks["A"] = parseInt("1111001111000000", 2);
charMasks["A"] = 0x3CF;
charMasks["A"] = 975;
十六段显示器由三个函数对象组成：SixteenSegment、SegmentCanvas和SegmentArray。SegmentArray负责设置显示模式并存储多个元素的值。它与渲染控件或绘制Canvas无关。这个对象只管理为每个元素设置位模式。SegementCanvas提供通用功能，用于将显示绘制到Canvas上。这包括自定义显示的形状和位置的属性。它要求继承对象实现定义形状和段数的细节。SixteenSegment扩展了SegmentCanvas对象，增加了特定于十六段显示器的功能。这意味着它必须设置两个属性。Points属性定义了十六段布局的段几何形状。CharacterMasks属性提供了一个查找，将字符映射到它们期望的十六段模式。
var seven = new SevenSegment(canvas, 6);
seven.DisplayText("Hello World");