javascript - table 上的 Canvas ，奇怪的填充

Question

介绍:

我正在制作一个网站，我想制作一个 <table/>与 <canvas/> es 在里面。

我做了什么:

我做了一个<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;
}

为了使 Canvas 看起来像一个大盒子，我希望它们相互碰撞。我做了一个代码示例: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); 
}

问题:

Canvas 彼此不接触。我已经删除了表格 border , margin , padding和 spacing .

Canvas 需要有一个固定的 height的 50px . (在代码中我试图让他们先命中，这比高度更重要)

但即使我在 JavaScript 中更改大小 <td/>它周围总是5px大于 <canvas/> .

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

总结:

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

Answer 1

默认 <canvas/>有它的 display属性设置为 inline这意味着它像文本一样绘制。您看到的差距来自于一些字母，如 g在基线下方绘制。一种方法是更改​​ display属性:

canvas {
    display: block;
}

See this demo .