Question

以下代码生成所需高度更高的单元格我希望细胞适合它的内部画布，以便在它们上画一条对角线

var miglobal = [];
var ref1 = document.createElement("table");
var refx = document.createElement("tbody");
ref1.appendChild(refx);
var ref2, ref3;

console.log(ref1);
for (var y = 0; y < 25; y++) {
    ref3 = refx.insertRow(y);

    for (var x = 0; x < 25; x++) {
        ref2 = ref3.insertCell(x);
        var cnv = document.createElement("canvas");
        cnv.setAttribute("id", ("mycnv" + (y * 25 + x)).toString());
        cnv.setAttribute("height", "30px");
        cnv.setAttribute("width", "30px");
        var cntx = cnv.getContext("2d");
        cntx.moveTo(0, 0);
        cntx.lineTo(30, 30);
        cntx.stroke();
        miglobal.push(cntx);
        ref2.appendChild(cnv);
    };
};
document.body.appendChild(ref1);

table {
    border: 2px black solid;
}
tr:hover {
    background: red;
}
tr >td {
    border: 2px solid black;
    padding: 0;
}
td > canvas {
    height: 100%;
    width: 100%;
    padding: 0;
}

全部是动态生成的，因为手头的25 * 25表可能很麻烦

Answer 1

默认情况下，canvas元素显示为内联元素。这会导致生成具有canvas元素的线框，默认情况下与线框的基线对齐。您遇到的额外空间是基线下方的空间（即字符的空间，例如“g”下降到基线以下）。

在您的示例中，您可以更改canvas元素以显示为块元素。例如......

td > canvas {
  padding: 0;
  display: block;
}

或者您可以更改要使用不同垂直对齐方式显示的画布元素。例如......

td > canvas {
  padding: 0;
  vertical-align: middle;
}

JavaScript表缩小以适合其内容

1 个答案: