table 表头斜线 canvas自适应

来源：互联网发布：淘宝图片ps后算盗图吗编辑：程序博客网时间：2024/05/15 03:05

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; //右下角点xvar y2 = y1+h*2;//右下角点yconsole.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();})

0 0