单元格中添加自适应斜线

1.页面效果

2.jsp代码

<canvas id="line" style="display: none;"></canvas>

。。。。。。。。。。省略其他代码

<td  id='classify'>
	<div class='date'>日期</div>
	<div class='time'>时间</div>
</td>

3.css代码

.date {
	float: right;
}

.time {
	float: left;
}

4.js代码

function line() {
	var canvas = document.getElementById("line");
	var width = $("#classify").width(); //获取单元格宽度
	var height = $("#classify").height(); //获取单元格高度
	
	if (canvas.getContext) {
		var ctx = canvas.getContext("2d");

		ctx.fill();
		ctx.lineWidth = 1; //斜线的宽度
		ctx.strokeStyle = "#BBB"; //斜线的颜色
		ctx.beginPath();
		ctx.moveTo(0, 0); //斜线开始的坐标
		ctx.lineTo(width, height); //斜线结束的坐标
		ctx.stroke();
		ctx.closePath();
		
		document.getElementById("classify").style.backgroundImage = "url('" + ctx.canvas.toDataURL() + "')";
		document.getElementById("classify").style.background.attachment = "fixed";
	}
}

5.主要思路
获取单元格的宽度和高度，利用相对与单元格的坐标，连接两点划线。
可以参考教程：http://www.runoob.com/html/html5-canvas.html