Javascript HTML5 画布调整到父级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8624268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 canvas resize to parent
提问by Giovanni Funchal
I want to resize the canvas element so that if fits its parent, whether it's <body>("full-screen") or some <div>for instance. This is my attempt:
我想调整画布元素的大小，以便适合其父元素，例如<body>（“全屏”）或某些元素<div>。这是我的尝试：
// called at each frame
function update() {
var canvasNode = document.getElementById('mycanvas');
canvasNode.width = canvasNode.parentNode.clientWidth;
canvasNode.height = canvasNode.parentNode.clientHeight;
}
For some reason, the canvas doesn't stop growing! Maybe client*aren't the right parameters?
出于某种原因，画布不会停止增长！也许client*不是正确的参数？
See the code in action here: http://jsfiddle.net/ARKVD/24/
在此处查看正在运行的代码：http: //jsfiddle.net/ARKVD/24/
采纳答案by Simon Sarris
The easiest thing to do is to always keep the canvas in its own div.
最简单的做法是始终将画布保留在自己的 div 中。
The only thing that will ever be in this div is the canvas.
这个 div 中唯一的东西就是画布。
Then you can use CSS to resize the div however you want. You want it as large as the body? Give the div width: 100%.
然后您可以使用 CSS 根据需要调整 div 的大小。你想要它和身体一样大吗？给 div width: 100%。
Then you can always rightfully do:
那么你总是可以正确地做：
canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;
If you do this you won't have to worry about the weird issues that you're currently facing when the body is the direct parent of the div.
如果您这样做，您将不必担心当 body 是 div 的直接父级时您当前面临的奇怪问题。
回答by Josh Langley
I've found that the cleanest approach is to simply "remind" the canvas element how big it's supposed to be upon resize:
我发现最简洁的方法是简单地“提醒”画布元素在调整大小时它应该有多大：
window.onresize = function () {
canvas.style.width = '100%';
canvas.height = canvas.width * .75;
}
The height setting in this case is there to simply maintain a 4:3 ratio. You can, of course, make it 100% as well if you desire.
在这种情况下，高度设置只是为了保持 4:3 的比例。当然，如果您愿意，您也可以将其设为 100%。
回答by Sam
I found the same problem happening, and the only way I could find to work around it was to set the canvas height to parentHeight - 1. This was using CEF. In thisfiddle I had to set it to parentHeight - 5.
我发现发生了同样的问题，我能找到的唯一解决方法是将画布高度设置为 parentHeight - 1。这是使用 CEF。在这个小提琴中，我必须将它设置为 parentHeight - 5。
canvasNode.height = div.clientHeight - 5;
回答by Imran
You can workaround the problem by breaking the circular dependency between the parent node and the child node. The size allocation of the DOM elements should only propagate top-down (from the parent to the child). You can ensure that the child element (canvas) does not affect the parent's size by setting
您可以通过打破父节点和子节点之间的循环依赖来解决该问题。DOM 元素的大小分配应该只自上而下（从父级到子级）传播。您可以通过设置来确保子元素（画布）不会影响父元素的大小
canvasNode.style.position = 'absolute';
This puts it into its own document flow that is independent of the parent.
这会将其放入独立于父级的自己的文档流中。
