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,
		padding = 20,
		drawNum = global.drawNum,
		second, showTime,
		getTimeNum, timeId;

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

	// 获取当前时间
	getTimeNum = function() {
		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()) {

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

			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>