HTML5 画布调整为父级答案

【问题标题】：HTML5 canvas resize to parentHTML5 画布调整为父级
【发布时间】：2012-01-27 07:09:35
【问题描述】：

我想调整 canvas 元素的大小，以便适合其父元素，例如 <body>（“全屏”）或一些 <div>。这是我的尝试：

// called at each frame
function update() {
    var canvasNode = document.getElementById('mycanvas');
    canvasNode.width = canvasNode.parentNode.clientWidth;
    canvasNode.height = canvasNode.parentNode.clientHeight;
}

由于某种原因，画布不会停止增长！也许client* 不是正确的参数？

在此处查看实际代码： http://jsfiddle.net/ARKVD/24/

【问题讨论】：

如果画布为155px高，则body为160px高，这使得画布每次都保持增长5px（body似乎在每次画布前都在5px前面增长）。不过，我不知道为什么，因为您确实在0px 上设置了所有边距/填充。（这是在 Chrome 上。）
谢谢，在 Linux/Firefox 上，我看到 4px 或 3px 偏移（取决于我的窗口是否最大化）...烦人！
奇怪的是，如果画布的高度设置为0px，则主体为20px 高。如果画布被实际移除，主体只会折叠到0px。
你还必须将html的高度设置为100%：jsfiddle.net/ARKVD/25
这很奇怪。无论如何，它在 DIV 中不起作用（我希望画布适合它的父大小）：jsfiddle.net/ARKVD/29

标签： javascript html dom canvas html5-canvas

【解决方案1】：

最简单的做法是始终将画布保留在自己的 div 中。

这个 div 中唯一存在的就是画布。

然后你可以使用 CSS 来调整你想要的 div 的大小。你想要它和身体一样大吗？给 div width: 100%.

那么你总是可以正确地做：

canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

如果您这样做，您将不必担心当 body 是 div 的直接父级时您当前面临的奇怪问题。

【讨论】：

你能解释一下为什么它不适用于body（即为什么需要DIV）？
如果您希望它与具有 div 的主体一样大，则更容易，因为您可以使用 CSS 指定宽度和高度（例如 100% 宽度等）。 100% 的宽度并不一定与主体的clientWidth 一样大。相反，它使其与 CSS 规范中所称的“包含块”一样大，与主体的 clientWidth 和 Height 不同（更小）。从这个开始：jsfiddle.net/9FyNZ
谢谢！这解决了我遇到的一个非常烦人的问题。
这不起作用（至少在 Chrome 中）。如果包含 div 的宽度/高度为 100%，它仍然会不断增长。见这里jsfiddle.net/aakv7L7f

【解决方案2】：

您可以通过打破父节点和子节点之间的循环依赖关系来解决此问题。 DOM 元素的大小分配应该只传播自上而下（从父级到子级）。可以通过设置来保证子元素（画布）不影响父元素的大小

canvasNode.style.position = 'absolute';

这会将其放入独立于父级的自己的文档流中。

【讨论】：

【解决方案3】：

我发现最简洁的方法是简单地“提醒”画布元素在调整大小时它应该有多大：

window.onresize = function () {
    canvas.style.width = '100%';
    canvas.height = canvas.width * .75;
}

在这种情况下，高度设置只是为了保持 4:3 的比例。当然，如果您愿意，也可以做到 100%。

【讨论】：

【解决方案4】：

我发现发生了同样的问题，我能找到解决它的唯一方法是将画布高度设置为 parentHeight - 1。这是使用 CEF。在this fiddle 中，我必须将其设置为 parentHeight - 5。

canvasNode.height = div.clientHeight - 5;

【讨论】：