在前端开发中，有时候需要显示数字或字母，且需要使用七段显示效果。这时候，npm 包 seven-segment-display 就是一个非常方便实用的工具。
seven-segment-display 是什么
seven-segment-display 是一个使用 canvas 绘制效果的 npm 包，能够快速生成七段显示效果。
官方 GitHub 地址：https://github.com/howardroark/seven-segment-display
安装及使用
安装：
npm install seven-segment-display --save
使用：
-- -------------------- ---- ------- ------ ------------------- ---- ------------------------ -- --- ----- --- - --- --------------------- ------- ---------------------------------- --- -- ---- ----- ------------------
上面是 seven-segment-display 最基本的使用方法，只需要传入一个 canvas 元素，就可以绘制数字。但是，绝大部分场景下需要进行更多操作，接下来我们会详细介绍 seven-segment-display 的使用及操作。
API 及示例
初始化
const seg = new SevenSegmentDisplay({
canvas: document.getElementById('canvas'), // 必填，canvas 元素
digits: 5, // 可选，指定数字位数，默认为 4
decimal: true, // 可选，是否显示小数点，默认为 false
})初始化时，需要传入一个带有 id 的 canvas 元素，同时可以指定数字位数和是否显示小数点。
绘制数字
seg.draw(value: string | number): string
draw 方法用于绘制数字，可以传入一个字符串或数字。绘制成功后，返回绘制结果的字符串形式。
示例：
seg.draw(12345) // 返回字符串 "12345"
设置颜色
seg.setColor(colors: {
background?: string, // 背景色，默认为 "#444"
on?: string, // 数字亮色，默认为 "#F00"
off?: string, // 数字暗色，默认为 "#300"
decimal?: string // 小数点颜色，默认为 "#FFF"
}): voidsetColor 方法用于设置数字的颜色。
示例：
seg.setColor({
background: "#000",
on: "#0F0",
off: "#666",
decimal: "#FFF",
})设置大小
seg.setSize(size: number): void
setSize 方法用于设置数字的大小。
示例：
seg.setSize(60)
设置水平对齐方式
seg.setAlignHorizontal(align: "left" | "center" | "right"): void
setAlignHorizontal 用于设置数字的水平对齐方式。
示例：
setAlignHorizontal('center')设置垂直对齐方式
seg.setAlignVertical(align: "top" | "middle" | "bottom"): void
setAlignVertical 用于设置数字的垂直对齐方式。
示例：
setAlignVertical('middle')设置间隔
seg.setSpacing(spacing: number): void
setSpacing 方法用于设置数字与数字之间的间隔。
示例：
seg.setSpacing(10)
设置小数点位置
seg.setDecimalPoint(decimalPoint: number): void
setDecimalPoint 用于设置小数点的位置。如果 decimal 属性为 false，则该方法无效。
示例：
seg.setDecimalPoint(2)
总结
npm 包 seven-segment-display 是一个非常实用的工具，能够快速生成七段显示效果。通过上述的 API 操作，我们可以对 seven-segment-display 进行更加丰富的使用及灵活的控制。
示例代码：https://codesandbox.io/s/seven-segment-display-5bx5d
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde88