table 表头斜线 canvas自适应

html中table只有行、列合并，有border，在一个td中有两种内容就只能js来了。网上查了一些实例，不行啊，还是自己写一个吧。

html：

<table class="testTa" style="width: 94%;font-size: 0.9rem;line-height: 30px;">
                <tr>
                    <th class="leri" style="border-bottom:none;text-align:right;"><span style="margin-right: 10px;">内容</span></th> 
                    <th rowspan="2">1</th>
                    <th rowspan="2">2</th>
                    <th rowspan="2">3</th>
                    <th rowspan="2">4</th>
                </tr>
                <tr>
               		<td class="rito" style="border-top:none;text-align:left;"> <span style="margin-left: 10px;">学员姓名</span> </td>
                </tr>
                <tr>
                	<td>小四</td>
                	<td>非常有信心</td>
                	<td>有信心</td>
                	<td>非常有信心</td>
                	<td>有点信心</td>
                </tr>
               
</table>
<canvas id ="myCanvas" width = '500' height = '500' style="position: absolute;left: 0;top: 0;z-index: -1;">Canvas画斜线</canvas>

 一个table，使用行合并，文字一个右对齐，一个左对齐，两个对角线让canvas两点之间画线就ok了。

js：

var myCanvas = document.getElementById("myCanvas");
context =  myCanvas.getContext("2d");
// canvas表格斜线
function aa(){
	var x1 = $('.leri').offset().left;//左上角点相对网页中x坐标
	var y1 = $('.leri').offset().top+1;//<span style="font-family: Arial, Helvetica, sans-serif;">左上角点相对网页中y坐标</span>
	var w = $('.leri').width(); 
	var h = $('.leri').height();
	var x2 = x1+w; //右下角点x
	var y2 = y1+h*2;//右下角点y
		
	console.log("x1="+x1+",y1="+y1+",x2="+x2+",y2="+y2);

	context.moveTo(x1,y1);
	context.lineTo(x2,y2);
	context.strokeStyle = '#ccc';
	context.stroke();
	context.closePath();

	context.beginPath();   //虽然没什么用，但是清空画布很有用，没有他清空不了。
	context.fillStyle = "rgb(255,255,255)";
	context.fillRect(0,0,10,10);
	context.closePath();
	
}
aa();
$(window).resize(function() {//当窗口大小发生变化时，重新画线
	context.clearRect(0,0,500,500);//清空画布
	aa();
})