0

キャンバス要素をパディングなしで表のセルに合わせようとしています。つまり、キャンバスとセルの上部/下部の間に余白が必要ありません。したがって、行の高さを 20px、キャンバスの高さを 20px と定義します。padding:0px スタイルも使用します。ただし、上と左からのみパディングを取得せず、下にパディングを取得します。実際、望ましくない余白に対応するために、表のセルが高くなっているように見えます。どうすれば解決できますか？

また、キャンバスの幅と高さを HTML と CSS で定義することの違いは何ですか? 一方が他方をオーバーライドしますか?

以下は私のHTMLコードです。ありがとう。

<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>

<script>
  $(function() {
      var canvas = document.getElementById('my_canvas');
      var ctx = canvas.getContext('2d');    
      ctx.fillRect(0,0,20,20);  
      $("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
  })

</script>
</head>

<style media="screen" type="text/css">

    .my_cell {height:20px; width:100px; padding:0}
    .my_canvas {height:20px; width:20px}
</style>

<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
    <tr><td class="my_cell"></td></tr>
</tbody>
</table>

<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>

</body>
</html>
4

2 に答える 2

6

キャンバスのスタイルに次を追加してみてください。

display : block;

デモ: http://jsfiddle.net/S7YJu/

これを見ると理由がわかります: http://jsfiddle.net/S7YJu/1/ - デフォルトではキャンバスが表示されますinline。つまり、「y」や「 p" 下にぶら下がって...

于 2013-05-19T00:10:46.570 に答える
0

あなたの質問はすでに回答されていますが、私は次のことを指摘したいと思います。

Canvas 要素は、イメージ要素の処理方法と同様に、ブロック レベル要素のように見えますが、インライン要素と非常によく似た方法で処理されます。問題を解決するには、スタイル ルールをfor canvas に設定する必要があります。displayblock

最善を尽くして、私はあなたにいくつかのアドバイスをしたいと思います：

1 開始 body タグを省略しました。

2 スクリプトタグは一番下に置くことをお勧めします。

4 可能であれば、テーブル要素の代わりに div を使用します。

5 いつも Jquery セレクターを使用するとは限りません...

すなわち

document.getElementById('my_canvas');

コピー ->

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
  .my_cell {width:100px; }
  .my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
  <table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
     <tbody>
        <tr>
           <td class="my_cell"></td>
        </tr>
     </tbody>
  </table>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <script>
     $(document).ready(function () {
        $(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
            });

       var canvas = $('.my_canvas');
       var ctx = canvas.getContext('2d');    
       ctx.fillRect(0,0,0,20,20);
  </script>
</body>
</html>
于 2013-05-19T01:08:34.253 に答える