使画布像父母一样宽和高

Question

我想制作一个矩形画布来模拟一个进度条,但是当我将画布的宽度和高度设置为100%时,它似乎并没有像父母一样高和宽

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

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

Answer 1

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

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

你的例子有几个问题:

1. A <div>没有height或width属性.你需要通过CSS设置它们.
2. 即使div的大小正确,它也使用默认值position:static,这意味着它不是任何子节点的定位父节点.如果希望画布与div的大小相同,则必须将div设置为position:relative(absolute或者fixed).
3. Canvas上的widthand 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;
}

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 for JQuery解决方案.

JSFiddle for Javascript解决方案.