使画布与父对象一样宽和一样高

我想制作一个矩形画布来模拟进度条，但是当我将画布的宽度和高度设置为100％时，它实际上并没有使其高度和父级一样高

请参见下面的示例
http://jsfiddle.net/PQS3A/

甚至可以制作非正方形的画布吗？我不想对画布的高度和宽度进行硬编码，因为在更大或更小的屏幕（包括移动设备）上查看时，画布应该动态更改

这是一个解决问题的可行示例：

http://jsfiddle.net/PQS3A/7/

您的示例有几个问题：

1. A<div>没有height或width属性。您需要通过CSS进行设置。
2. 即使div的大小正确，它也会使用default position:static，这意味着它不是任何子级的定位父级。如果希望画布与div大小相同，则必须将div设置为position:relative（或absolute或fixed）。
3. “画布”上的width和height属性指定要绘制的数据像素数（如图像中的实际像素），并且与画布的显示大小分开。这些属性必须设置为整数。

上面链接的示例使用CSS设置div大小并使其成为定位父对象。它创建了一个JS函数（如下所示），以将画布设置为与其放置的父对象相同的显示尺寸，然后调整内部width和height属性，使其像素数与显示的相同。

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

如果希望画布的大小与父元素一样大，请使用它的width和height属性。您可以使用JQuery进行设置。

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

如果您不知道JQuery，请使用以下Javascript：

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

如果您使用cssheight和width属性style="width:100%; height:100%;"，那么您只是在拉伸画布。这将使您在画布上绘制的所有内容看起来都被拉伸。

JSFiddle用于JQuery解决方案。

JSFiddle for Javascript解决方案。

使用CSS属性代替标签上的属性：

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

这似乎有效