# 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');

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

cxt.translate(100, 50);
drawNum(cxt, 2);
})(window); ```
```<div class="canvas-block">
<canvas id="num-canvas"></canvas>
</div>```