table 表头斜线canvas 自适应

最新推荐文章于 2024-01-01 09:56:54 发布

原创最新推荐文章于 2024-01-01 09:56:54 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客主要介绍如何使用JavaScript和Canvas技术来创建一个能够自适应的表格表头，其中包含斜线效果。通过JS动态计算和Canvas绘制，实现了表头在不同屏幕尺寸下仍能保持良好的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路很简单，第一行除了第一个单元格其余合并2行单元格，文字一个右浮动一个左浮动。获取到单元格左上角坐标与右下角坐标，铺一个canvas，z-index为-1；两点之间画线就ok了。

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>
                    <th rowspan="2">5</th>
                    <th rowspan="2">6</th>
                    <th rowspan="2">7</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>
                	<td>非常有信心</td>
                	<td>有信心</td>
                	<td>非常没信心</td>
                </tr>
                <tr>
                	<td>选项比例</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	<td> 
                		<div>非常有信心:有信心</div>  <div><span>1</span>:<span>1</span> </div> 
						<div>非常没信心:有信心</div>  <div><span>1</span>:<span>1</span> </div>
                	</td>
                	
                </tr>
       </table>
 <canvas id ="myCanvas" width = '500' height = '500' style="position: absolute;left: 0;top: 0;z-index: -1;">Canvas画斜线</canvas>

js部分：

var myCanvas = document.getElementById("myCanvas");
context =  myCanvas.getContext("2d");
// canvas表格斜线
function aa(){
	var x1 = $('.leri').offset().left;
	var y1 = $('.leri').offset().top+1;
	var w = $('.leri').width();
	var h = $('.leri').height();
	var x2 = x1+w;
	var y2 = y1+h*2;
		
	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();
})