2

はじめに:

私はウェブサイトを作っていて、その中に es を入れて を作りたいと思って<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/

4

2 に答える 2

4

デフォルトで<canvas/>は、テキストのように描画されることを意味するdisplayプロパティが設定されています。表示されるギャップは、一部の文字がベースラインより下に描画inlineされるという事実から生じます。1 つの方法は、プロパティ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 に答える