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

发布于04月19日

我想做一个矩形画布来模拟进度条但似乎当我将画布的宽度和高度设置为100%时，它实际上并没有像父画布那样高和宽

please see example below
http://jsfiddle.net/PQS3A/

有没有可能做非正方形的帆布呢？我不想硬编码画布的高度和宽度，因为当在更大或更小的屏幕(包括移动设备)中查看时，它应该动态变化

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

您的示例有几个问题:

<div>没有height或width属性.您需要通过CSS设置它们.
即使div的大小正确，它也使用默认的position:static，这意味着它不是任何子级的定位父级.如果希望画布的大小与div相同，则必须将div设置为position:relative(或absolute或fixed).
画布上的width和height属性指定要绘制的数据的像素数(如图像中的实际像素)，并且与画布的display size分开.这些属性必须设置为整数.

上面链接的示例使用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;
}