div中的画布-CSS3的位置问题

Question

我有这个HTML：

<div id=test>
<canvas  id="pic" width="300" height="250"></canvas>
</div>

当我尝试通过CSS定义宽度和高度时（从HTML元素中删除width和height属性），如下所示：

#pic{
width:300px;
height:250px;
}

在这种情况下，图片变得越来越张紧-为什么？

当我尝试向div添加一些其他CSS属性时，例如：

#test{
float:right;
border:solid red;
border-radius: 10px;
box-shadow: 5px 5px 20px #888;
}

我正在将图片（或实际上是画布）固定在左上角，由于某种原因，在图片周围创建的“盒子”比图片本身要大一些。

我尝试过使用各种margin和padding在div内移动画布，但并未按照我想要的方式在“框”内移动画布。

那么，是否有任何方法可以移动画布，使其位于“盒子”的中间，或者可以选择一种使盒子变小的方法？

新增加

从第一个问题开始-这是完整的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

      <script>
          function myImage() {
              var context = document.getElementById('pic').getContext('2d');

              var img = new Image();
              img.src = "saturn-400x300.jpg";

              img.onload = function () {

                      context.drawImage(img, 0, 0, 300, 250);
                  }

          }

    </script>

    <style>
        #pic {
        width:300px;
        height:250px;
        }

    </style>

</head>



<body onload="myImage()">

    <div id="test">
<canvas  id="pic" width="300" height="250"></canvas>
</div>


</body>
</html>

现在，在这种情况下，由于内联属性，图片很好。 外观如下：

但是，当我从内联中删除属性时，仅保留样式-这是它的外观：

现在，关于第二个问题。让我离开内联属性只是为了解释我在说什么。 我在div标签中添加了下一个代码：

   #test{
float:right;
border:solid red;
border-radius: 10px;
box-shadow: 5px 5px 20px #888;
}

现在看起来像：

我要消除的是红色边框和图片（画布）之间的空白。

Answer 1

尝试使用重置的CSS文件。 这可能是由浏览器默认设置引起的。 如果是这样，请在另一个浏览器中打开您的网站，然后在此处进行检查。

div中的画布-CSS3的位置问题

问题描述

新增加

1 个解决方案

解决方案1
0 2013-09-21 18:56:44

div中的画布-CSS3的位置问题

问题描述

新增加

1 个解决方案

解决方案1 0 2013-09-21 18:56:44

解决方案1
0 2013-09-21 18:56:44