Question

说明：

我正在制作一个网站，我想在其中加<table/> <canvas/>。

我做了什么：

我在<table/>中加了一些<canvas/> es，所以我可以用它们画出来。

<table>
    <tr>
        <td>item1</td>
        <td><canvas></canvas></td>
    </tr>
    <tr>
        <td>item2</td>
        <td><canvas></canvas></td>
    </tr>
    <tr>
        <td>item3</td>
        <td><canvas></canvas></td>
    </tr>
</table>

CSS：

canvas {
    margin: 0;
    padding: 0;
    height: 50px;
}
table {
    margin: 0;
    padding: 0;
    width: 500px;
    border: 0;
    border-width: 0;
    border-spacing: 0;
}
tr {
    margin: 0;
    padding: 0;
}
td {
    margin: 0;
    padding: 0;
    border: 0;
    border-width: 0;
    border-spacing: 0;
    height: 50px;
}

为了让画布看起来像一个大盒子，我希望它们相互碰撞。我做了一个代码示例：http://jsfiddle.net/Whb8u/

window.onload = function(){
    if(window.addEventListener){
        var items = document.getElementsByTagName('canvas');
        for(var i = 0; i < items.length; i++){
            drawcanvas(items[i]);
        }
    }
};

function drawcanvas(item){
    var context = item.getContext("2d");
    var canvasWidth = item.parentNode.offsetWidth;
    var canvasHeight = item.height = item.parentNode.offsetHeight;

    context.fillStyle = 'rgb(100,100,100)';
    context.fillRect(0, 0, canvasWidth, canvasHeight); 
}

问题：

画布不相互接触。我已删除了表格border，margin，padding和spacing。

画布需要固定height 50px。（在我尝试使它们首先被击中的代码中，这比高度更重要）

但即使我更改JavaScript中的大小，其周围的<td/>始终比5px大<canvas/>。

有谁知道为什么会发生这种情况和/或如何修复它？

要点：

灰色方框不会相互碰撞。有谁知道为什么会发生这种情况和/或如何修复它？代码示例：http://jsfiddle.net/Whb8u/

Answer 1

默认情况下<canvas/>将display属性设置为inline，这意味着它就像文字一样绘制。你看到的差距来自于像g这样的一些字母在基线以下绘制的事实。一种方法是更改display属性：

canvas {
    display: block;
}

See this demo

Answer 2

有谁知道为什么会发生这种情况和/或如何修复它？

它的发生是因为<canvas>元素的默认垂直对齐值为baseline ..如果您不想更改显示值，则可以更改垂直对齐值到底：

http://jsfiddle.net/Whb8u/2/

表中的画布，奇怪的填充

说明：

问题：

要点：

2 个答案: