使canvas和父母一样宽广
我想做一个矩形的canvas来模拟进度条，但似乎当我设置canvas的宽度和高度为100％，它并不真正使其高和宽父母
请看下面的例子
http://jsfiddle.net/PQS3A/
甚至有可能做非平方的canvas？ 我不想硬编码canvas的高度和宽度，因为在更大或更小的屏幕中查看时，它应该dynamic变化，包括移动设备
下面是一个解决问题的工作示例：
http://jsfiddle.net/PQS3A/7/
你的例子有几个问题：
- 一个
<div>不具有height或width属性。 你需要通过CSS设置。 - 即使div的大小正确，它使用默认的
position:static，这意味着它不是任何孩子的定位父。 如果您希望canvas与div的大小相同，则必须将div设置为position:relative（或absolute或fixed）。 - canvas上的
width和height属性指定要绘制的数据的像素数（如图像中的实际像素），并与canvas的显示大小分开。 这些属性必须设置为整数。
链接到上面的例子使用CSS设置div的大小，并使其成为一个定位父。 它创build一个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; }
如果您希望实际上与父元素一样大，请使用canvas的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%;" ，那么你只是伸展canvas。 这将导致您在canvas上绘制的所有内容看起来都拉长。
JSFiddle for JQuery解决scheme。
JSFiddle for Javascript解决scheme。
在标签上使用CSS属性代替属性：
<div style="background-color:blue;width:140px;height:20px"> <canvas style="background-color: red;width:100%;height:100%"> </canvas> </div>
这似乎工作
