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 元素似乎是块级元素，但其处理方式与内联元素非常相似，类似于处理图像元素的方式。要解决您的问题，您必须将样式规则display设置block为画布。

出于好意，我想给你一些建议：

1 您省略了开头的正文标记。

2 建议将脚本标签放在底部。

4 尽可能使用 div 代替表格元素。

5 你并不总是使用 Jquery 选择器...

IE

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 回答