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();
})
| 
转播
