html表内画斜线,使用HTML的canvas，给表格画斜线-Go语言中文社区

使用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){

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);

}

内容 姓名		asd	asd	asd	asd
		asd	asd	asd	asd
表头	asd	asd	asd	asd	asd

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

window.onload = function (){

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

//其它函数

}

效果图

一条斜线

两条斜线

三条斜线

加背景颜色