2

介绍：

我正在制作一个网站，我想在其中制作一个<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;
}

为了使画布看起来像一个大盒子，我希望它们相互碰撞。我做了一个代码示例：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和。paddingspacing

画布需要有一个固定height的50px. （在代码中我试图让它们先被击中，这比高度更重要）

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

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

概括：

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

4

2 回答 2

4

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

canvas {
    display: block;
}

请参阅此演示。

于 2013-05-14T13:59:13.043 回答
3

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

发生这种情况是因为该<canvas>元素的默认垂直对齐值为baseline.. 如果您不想更改显示值，则可以将垂直对齐值更改为底部：

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

于 2013-05-14T14:12:08.733 回答