使画布与父级一样宽和一样高

Question

我想制作一个矩形画布来模拟进度条 但似乎当我将画布的宽度和高度设置为 100% 时，它并没有真正使它与父级一样高和宽

请看下面的例子
http://jsfiddle.net/PQS3A/

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

Answer 1

这是一个解决问题的工作示例：

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

您的示例有几个问题：

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

上面链接的示例使用 CSS 设置 div 大小并使其成为定位的父级。它创建了一个 JS 函数（如下所示），将画布设置为与其定位的父级相同的 display 大小，然后调整内部 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;
}

Answer 2

如果您希望画布实际上与父元素一样大，请使用画布的 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;

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

JSFiddle 用于 JQuery 解决方案。

JSFiddle 用于 Javascript 解决方案。

Answer 3

在标签上使用 CSS 属性而不是属性：

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

That seems to work