SOURCE

<canvas id="canvas-table2"></canvas>
<script type="text/javascript" language="javascript">
	canvasTable({
		// 元素标签
		el: document.getElementById('canvas-table2'),
		// 水印
		watermark: '这是水印',
		// 字段
		field: {
			// 字段KEY \ 字段显示标题 \ 字段占用宽度比例
			title: { label: '标题', proportion: 3 },
			introduction: { label: '简介', proportion: 9 },
			time: { label: '时间', proportion: 1 },
			author: { label: '作者', proportion: 1 },
		},
		// 列表数据
		list: [
			{ title: '全面依法治国“新十六字方针” 您收好啦！', introduction: '习近平会见以色列总理  治国理政  学习贯彻讲话精神', time: '2017-03-22', author: '央视网' },
			{ title: '李克强与内塔尼亚胡谈了啥', introduction: '出访澳大利亚 新西兰  “一带一路”高峰论坛  张德江会见以色列总理', time: '2017-03-21', author: '新京报' },
			{ title: '伦敦恐怖袭击死亡人数升至5人 40人受伤', introduction: '袭击者撞伤多人刀刺警察  美德法谴责英国恐袭事件', time: '2017-03-23', author: '参考消息网' },
			{ title: '人社部：事业单位技术人员创业可“留职不停薪”', introduction: '香港或就“装甲车被扣”事件追责 起诉涉事运输公司', time: '2017-03-23', author: '中国新闻网' },
			{ title: '红色特别版iPhone是对中国消费者的一种谄媚吗？', introduction: '“萨德”事件持续发酵，韩国游戏入华被无限延期', time: '2017-03-22', author: '互联网' },
			{ title: '万亿个税北上广深贡献4成 北京上海均超千亿', introduction: '英美电子禁令引抱怨 业内人士称该禁令武断荒谬', time: '2017-03-23', author: '第一财经网' },
			{ title: '毛阿敏丈夫10亿美元投资疑打水漂 被告私募回应', introduction: '江苏大学排球主考官借高招受贿 暴力猥亵女家教', time: '2017-03-22', author: '澎湃新闻网' },
			{ title: '包贝尔火锅店被曝“四川空运鸭血”没有一滴鸭血', introduction: '退休夫妇参加"道山"会销 花30多万买蜂胶和营养液', time: '2017-03-23', author: '重庆新闻网' },
		],
		// 渲染完成回调 err为检测支不支持canvas
		callback: function(err) {
			console.log(err);
		}
	});
</script>

var canvasTable = function(parameter) {

	var canvas = parameter.el,
		field = parameter.field,
		list = parameter.list,
		watermarkText = parameter.watermark,
		callback = parameter.callback;


	if (!canvas || !canvas.getContext) {
		return callback && callback('浏览器不支持canvas');
	}


	// 2d画布
	var context = canvas.getContext('2d');
	// 字段高度
	var itemHeight = 35;


	// 画布宽度
	canvas.width = canvas.parentNode.clientWidth;
	// 画布高度
	canvas.height = itemHeight * (list.length + 1);


	// 字段宽度
	var fieldProportionCalculation = 0;
	for (var key in field) {
		fieldProportionCalculation += field[key].proportion || 1;
	}
	for (var key in field) {
		field[key].width = parseInt(canvas.width / fieldProportionCalculation * field[key].proportion);
	}

	// 格式
	context.lineWidth = 1;
	context.fillStyle = '#333';
	context.strokeStyle = "black";
	context.font = "14px Arial";
	context.textAlign = "center";
	context.textBaseline = "middle";
	context.fillStyle = '#000';

	// 外边距
	context.beginPath();
	context.moveTo(0, canvas.height);
	context.lineTo(0, 0);
	context.lineTo(canvas.width, 0);
	context.stroke();

	// 字段表头
	var theader = {};
	for (var key in field) {
		theader[key] = field[key].label;
	}
	list.unshift(theader);


	var gblen = function(srt) {
		var len = 0;
		for (var i = 0; i < srt.length; i++) {
			if (srt.charCodeAt(i) > 127 || srt.charCodeAt(i) == 94) {
				len += 2;
			} else {
				len++;
			}
		}
		return len;
	};



	// 渲染字段
	for (var i = 0, len = list.length; i < len; i++) {
		if (i === 0) {
			context.font = " bold 14px Arial";
		}
		var item = list[i];
		var x = 0;
		for (var key in field) {
			var widthIndex = x + field[key].width;
			context.beginPath();
			context.moveTo(widthIndex, i * itemHeight);
			context.lineTo(widthIndex, (i + 1) * itemHeight);
			context.lineTo(x, (i + 1) * itemHeight);
			context.stroke();
			var x = x + field[key].width / 2;
			var y = i * itemHeight + itemHeight / 2;
			var value = item[key];
			if (gblen(value) / 2 * 14 > field[key].width) {
				value = value.substr(0, parseInt(field[key].width / 14) - 2) + '...';
			}
			context.fillText(value, x, y);
			x = widthIndex;
		}
		if (i === 0) {
			context.font = "14px Arial";
		}
	}


	// 创建水印
	watermarkText = watermarkText || '';
	var watermark = document.createElement('canvas')
	watermark.width = watermarkText.length * 35;
	watermark.height = watermarkText.length * 20 + 35;
	var watermarkTextCtx = watermark.getContext("2d");
	watermarkTextCtx.font = "30px/0px 黑体";
	watermarkTextCtx.fillStyle = "rgba(0,0,0,0.1)";
	watermarkTextCtx.rotate(-20 * Math.PI / 180);
	watermarkTextCtx.fillText(watermarkText, -10, watermarkText.length * 20);
	watermarkTextCtx.rotate(20 * Math.PI / 180);


	// 绘制水印
	var pattern = context.createPattern(watermark, "repeat");
	context.fillStyle = pattern;
	context.beginPath();
	context.strokeStyle = "rgba(0,0,0,0)";
	context.rect(0, 0, canvas.width, canvas.height);
	context.fill();
	context.stroke();

	return callback && callback(null);

};