JavaScript
(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,...