js实现led
LED 数字显示实现
使用 JavaScript 和 Canvas 绘制 LED 风格的七段数字显示。七段显示由 a-g 七个段组成，每个段的亮灭状态组合可显示 0-9 的数字。
// 七段数码管配置
const segments = {
a: { x: 60, y: 20, w: 80, h: 10, on: false },
b: { x: 140, y: 30, w: 10, h: 80, on: false },
c: { x: 140, y: 120, w: 10, h: 80, on: false },
d: { x: 60, y: 200, w: 80, h: 10, on: false },
e: { x: 50, y: 120, w: 10, h: 80, on: false },
f: { x: 50, y: 30, w: 10, h: 80, on: false },
g: { x: 60, y: 110, w: 80, h: 10, on: false }
};
// 数字对应的段亮灭配置
const digitSegments = [
[1, 1, 1, 1, 1, 1, 0], // 0
[0, 1, 1, 0, 0, 0, 0], // 1
[1, 1, 0, 1, 1, 0, 1], // 2
[1, 1, 1, 1, 0, 0, 1], // 3
[0, 1, 1, 0, 0, 1, 1], // 4
[1, 0, 1, 1, 0, 1, 1], // 5
[1, 0, 1, 1, 1, 1, 1], // 6
[1, 1, 1, 0, 0, 0, 0], // 7
[1, 1, 1, 1, 1, 1, 1], // 8
[1, 1, 1, 1, 0, 1, 1] // 9
];绘制七段数码管
创建 Canvas 元素并设置显示数字的函数：
function drawDigit(ctx, digit, x, y, color = '#ff0000') {
// 设置数字对应的段状态
const segStates = digitSegments[digit];
Object.keys(segments).forEach((key, i) => {
segments[key].on = segStates[i] === 1;
});
// 绘制各段
Object.values(segments).forEach(seg => {
ctx.fillStyle = seg.on ? color : '#333333';
ctx.fillRect(x + seg.x, y + seg.y, seg.w, seg.h);
});
}
// 初始化 Canvas
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
// 示例：显示数字 8
drawDigit(ctx, 8, 50, 50, '#00ff00');动态显示数字
实现一个从 0 到 9 循环显示的数字 LED 效果：
let currentDigit = 0;
setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawDigit(ctx, currentDigit, 50, 50);
currentDigit = (currentDigit + 1) % 10;
}, 1000);多位数显示
扩展功能以显示多位数字：
function drawNumber(ctx, num, x, y, color) {
const digits = String(num).split('').map(d => parseInt(d));
digits.forEach((d, i) => {
drawDigit(ctx, d, x + (i * 100), y, color);
});
}
// 显示数字 123
drawNumber(ctx, 123, 20, 50, '#ffff00');CSS 样式优化
为 LED 数字添加发光效果：
canvas {
background-color: #111;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}以上代码实现了一个完整的 LED 数字显示效果，支持单个数字、动态变化和多位数显示。可通过调整颜色参数和位置参数来自定义显示效果。
