桌子上的画布，奇怪的填充物

Question

简介：

我正在制作一个网站，我想制作一个带有<canvas/>es 的<table/>。

我做了什么：

我创建了一个<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/