javascript - 使 Canvas 与父级一样宽和一样高

Question

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

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

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

Answer 1

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

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

你的例子有几个问题:

1. A <div>没有height或 width属性。您需要通过 CSS 设置它们。
2. 即使 div 的大小正确，它也使用默认的 position:static ，这意味着它不是任何 child 的定位 parent 。如果你想让 Canvas 和div一样大，你必须把div设置为position:relative (或 absolute 或 fixed )。
3. width和 height Canvas 上的属性指定要绘制到的数据像素数(如图像中的实际像素)，并且与 Canvas 的显示大小 是分开的。这些属性必须设置为整数。

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