我有这个 HTML：
<div id=test>
<canvas id="pic" width="300" height="250"></canvas>
</div>
当我尝试通过 css 定义宽度和高度时（从 HTML 元素中删除宽度和高度属性），如下所示：
#pic{
width:300px;
height:250px;
}
在这种情况下，图片被拉长了——为什么？
当我尝试向其中添加一些其他 CSS 属性时，div例如：
#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;
}
现在看起来像：
红色边框和图片（画布）之间的空白是我想要消除的。