# Edit in JSFiddle

```(function(global) {
var numMap = [
[1, 2, 3, 4, 5, 6], [2,3], [1, 2, 4, 5, 7],
[1, 2, 3, 4, 7], [2, 3, 6, 7], [1, 3, 4, 6, 7],
[1, 3, 4, 5, 6, 7], [1, 2, 3], [1, 2, 3, 4, 5, 6, 7],
[1, 2, 3, 4, 6, 7]
],
pointArr,
drawSegment,
getPointArr,
drawNum;

// 获取对称点
getSymPoint = function(arr, axisX) {
var index = axisX ? 1 : 0,
result;

result = arr.map(function(val, i) {
var temp = val.slice();

temp[index] = -temp[index];

return temp;
});

return result;
};

// 获取各段LED灯的绘制点
getPointArr = function(w, h, thick) {
var pointArr = [[], [], [], [], [], [], []];

// 第6段的绘制点
pointArr[5].push(
[-w/2, -h/2], [-w/2 + thick, -h/2 + thick],
[-w/2 + thick, -thick/2], [-w/2 + thick/2, 0],
[-w/2, -thick/2]
);

// 第2段的绘制点
pointArr[1] = getSymPoint(pointArr[5]);

// 第5段的绘制点
pointArr[4] = getSymPoint(pointArr[5], true);

// 第3段的绘制点
pointArr[2] = getSymPoint(pointArr[1], true)

// 第1段的绘制点
pointArr[0].push(pointArr[5][0], pointArr[5][1]);
pointArr[0] = pointArr[0].concat(getSymPoint(pointArr[0].slice().reverse()));

// 第4段的绘制点
pointArr[3] = getSymPoint(pointArr[0], true);

// 第7段的绘制点
pointArr[6].push(pointArr[5][2], pointArr[5][3], pointArr[4][2]);
pointArr[6] = pointArr[6].concat(getSymPoint(pointArr[6].slice().reverse()));

return pointArr;
};

pointArr = getPointArr(40, 80, 10);

drawSegment = function(cxt, num, active) {
var arr = pointArr[num - 1],
i, len;

cxt.save();

cxt.beginPath();
for (i = 0, len = arr.length; i < len; i++) {
cxt.lineTo.apply(cxt, arr[i]);
}
cxt.closePath();
if (active) {
cxt.fillStyle = "#ff0000";
} else {
cxt.fillStyle = "rgba(192, 192, 192, 0.1)";
}
cxt.fill();
cxt.lineWidth = 2;
cxt.stroke();

cxt.restore();
};

drawNum = function(cxt, num) {
var map = numMap[num],
i;

for (i = 1; i <= 7; i++) {
if (map.indexOf(i) !== -1) {
drawSegment(cxt, i, true);
} else {
drawSegment(cxt, i);
}
}
};

global.drawNum = drawNum;
})(window);

(function(global) {
var canvas = document.getElementById('num-canvas'),
cxt = canvas.getContext('2d'),
sWidth = 400,
sHeight = 100,
drawNum = global.drawNum,
second, showTime,

// 定义canvas画布大小
canvas.setAttribute('width', sWidth);
canvas.setAttribute('height', sHeight);

// 获取当前时间
var dateObj = new Date(),
temp = [],
result = [],
i;

temp.push(
dateObj.getHours(),
dateObj.getMinutes(),
dateObj.getSeconds()
);

for (i = 0; i < temp.length; i++) {
result.push(Math.floor(temp[i] / 10));
result.push(temp[i] % 10);
}

return result;
};

// 显示时间，刷新频率1s
showTime = function showTime() {
var timeArr, x, i, len;

if (second !== new Date().getSeconds()) {

cxt.save();
cxt.clearRect(0, 0, sWidth, sHeight);
cxt.translate(0, sHeight/2);

cxt.fillStyle = '#ff0000';
cxt.beginPath();
cxt.arc(142, 20, 5, 0, Math.PI * 2);
cxt.fill();

cxt.beginPath();
cxt.arc(142, -20, 5, 0, Math.PI * 2);
cxt.fill();

cxt.beginPath();
cxt.arc(252, 20, 5, 0, Math.PI * 2);
cxt.fill();

cxt.beginPath();
cxt.arc(252, -20, 5, 0, Math.PI * 2);
cxt.fill();

for (i = 0, len = timeArr.length; i < len; i++) {
x = i % 2 ? 45 : 45 + padding;
cxt.translate(x, 0);
drawNum(cxt, timeArr[i]);
}
cxt.restore();
second = new Date().getSeconds();
}

timeId = setTimeout(showTime, 100);
};

showTime();
})(window);```
```<div class="canvas-block">
<canvas id="num-canvas"></canvas>
</div>```
```.canvas-block {
background-color: #000;
}
canvas {
-webkit-transform: skew(-10deg);
-moz-transform: skew(-10deg);
transform: skew(-10deg);
}```