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

make canvas as wide and as high as parent

提问by user1118019

i would like to make a rectangular canvas to simulate a progress bar but it seems when i set the width and height of a canvas to 100%, it doesn't really make it as high and as wide as parent

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

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

请参阅下面的示例
http://jsfiddle.net/PQS3A/

Is it even possible to make non-squared canvas? I don't want to hardcode the height and width of canvas, because it should change dynamically when viewed in bigger or smaller screen, including mobile devices

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

回答by Phrogz

Here's a working example fixing the problems:

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

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

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

You had several problems with your example:

你的例子有几个问题：

1. A <div>does not have heightor widthattributes. You need to set those through CSS.
2. Even if the div were sized correctly, it was using the default position:static, which means that it is NOT the positioning parent of any children. If you want the canvas to be the same size as the div, you must set the div to position:relative(or absoluteor fixed).
3. The widthand heightattributes on a Canvas specify the number of pixels of data to draw to (like the actual pixels in an image), and are separate from the display sizeof the canvas. These attributes must be set to integers.

1. A<div>没有heightorwidth属性。您需要通过 CSS 设置这些。
2. 即使 div 的大小正确，它也使用了 default position:static，这意味着它不是任何孩子的定位父级。如果您希望画布与 div 的大小相同，则必须将 div 设置为position:relative(or absoluteor fixed)。
3. Canvas 上的width和height属性指定要绘制到的数据像素数（如图像中的实际像素），并且与画布的显示大小分开。这些属性必须设置为整数。

The example linked to above uses CSS to set the div size and make it a positioned parent. It creates a JS function (shown below) to both set a canvas to be the same displaysize as its positioned parent, and then adjusts the internal widthand heightproperties so that is has the same number of pixels as it shows.

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

回答by Brant Olsen

Use the widthand heightattributes of the canvas if you want it to actually be as big as the parent element. You can set them using JQuery.

如果您希望它实际上与父元素一样大，请使用画布的width和height属性。您可以使用JQuery设置它们。

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

If you do not know JQuery, then use the following Javascript:

如果您不了解JQuery，请使用以下 Javascript：

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

If you use the cssheight and width attributes, style="width:100%; height:100%;", then you are just stretching the canvas. This will cause everything you draw on the canvas to look stretched.

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

JSFiddlefor JQuery solution.

用于 JQuery 解决方案的JSFiddle。

JSFiddlefor Javascript solution.

用于 Javascript 解决方案的JSFiddle。

回答by Kristoffer Sall-Storgaard

Use CSS properties instead of attributes on the tags:

在标签上使用 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

这似乎有效