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;
}

我正在将图片（或事实上的画布）紧贴在左上角，并且由于某种原因，在图片周围创建的“框”比图片本身更大。

我试图将div内的画布移动到各种margin和padding但是它没有移动到“框”内，这是我想要的方式

那么，有没有什么方法可以移动画布使其位于“框”的中间，或者是一种使框变小的方法？

新增加

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

<!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中的canvas - 与css3的位置问题

新增加

1 个答案: