HTML5 画布调整为父级
Posted
技术标签:
【中文标题】HTML5 画布调整为父级【英文标题】：HTML5 canvas resize to parent 【发布时间】：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
【参考方案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;
【讨论】：
以上是关于HTML5 画布调整为父级的主要内容，如果未能解决你的问题，请参考以下文章