使用HTML的canvas，给表格画斜线

最新推荐文章于 2024-02-16 23:45:17 发布

dream_hai

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量1w

点赞数 1

分类专栏： HTML js

本文链接：https://blog.csdn.net/dream_hai/article/details/52199558

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

使用HTML的canvas，给表格中画斜线

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>给表格加斜线</title>
</head>
<style>
table,td{
	border:2px solid black;
	border-collapse:collapse;
}
#header{
	width:80px;
	height:40px;
}
</style>
<script>
function line(header,line_width,line_color,line_number){
	var table = document.getElementById(header); 
	var xpos = table.clientWidth;
	var ypos = table.clientHeight;
	var canvas = document.getElementById('line');
	if(canvas.getContext){
		var ctx = canvas.getContext('2d');
		ctx.clearRect(0,0,xpos,ypos); //清空画布，多个表格时使用
		ctx.fill();
		ctx.lineWidth = line_width;
		ctx.strokeStyle = line_color;
		ctx.beginPath();
		switch(line_number){
			case 1:
				ctx.moveTo(0,0);
				ctx.lineTo(xpos,ypos);
				break;
			case 2:
				ctx.moveTo(0,0);
				ctx.lineTo(xpos/2,ypos);
				ctx.moveTo(0,0);
				ctx.lineTo(xpos,ypos/2);
				break;
			case 3:
				ctx.moveTo(0,0);
				ctx.lineTo(xpos,ypos);
				ctx.moveTo(0,0);
				ctx.lineTo(xpos/2,ypos);
				ctx.moveTo(0,0);
				ctx.lineTo(xpos,ypos/2);
				break;
			default:
			return 0;	
		}
				
		ctx.stroke();
		ctx.closePath();
		document.getElementById(header).style.backgroundImage = 'url("' + ctx.canvas.toDataURL() + '")';
		document.getElementById(header).style.background-attachment= 'fixed';
	}
}
window.onload = function (){
	line('header',2,'black',3);
	//目标单元格，线的宽度，线的颜色，线的条数，1~3，
	//line('two',2,'black',2);
}
window.onresize = function(){		//当窗口改变时，也随之改变
//可以加上检测 宽度高度是否变化在执行函数
	line('header',2,'black',3);
}
</script>
<body >
	<canvas id="line" style="display:none;"></canvas>
	<table>
		<tr>
			<td id="header" colspan='2' rowspan='2' >
				<span style="float:right">内容</span><br/><div style="float:left;">姓名</div>
			</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
		</tr>
		<tr>
			
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
		</tr>
		<tr>
			<td >表头</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
			<td>asd</td>
		</tr>
	</table>
</body>
</html>

window.onload = line();这样不能传递参数

<body οnlοad="line('header',2,'black',1)"></body>或者

window.onload = function （）{

line('header',2,'black',1);

//其它函数

}

效果图

一条斜线

两条斜线

三条斜线

加背景颜色

dream_hai

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
使用HTML的canvas，给表格画斜线

使用HTML的canvas，给表格中画斜线给表格加斜线table,td{ border:2px solid black; border-collapse:collapse;}#header{ width:80px; height:40px;}function line(header,line_width,line_color,line_number
复制链接

扫一扫