HTML5画布自适应父元素大小

Question

HTML5画布自适应父元素大小

27

我想调整画布元素的大小，以使其适应其父元素的大小，无论是 <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/

- Giovanni Funchal

1

如果画布高度为155px，而body的高度为160px，这意味着每次画布增加5px（每次画布增加时，body似乎提前了5px）。虽然你将所有边距/填充设置为0px，但我不知道为什么会出现这种情况。（这是在Chrome上发生的。） - pimvdb

奇怪的是，如果画布的高度设置为 0px，则 body 的高度为 20px。只有在实际删除画布时，body 才会折叠到 0px。 - pimvdb

2

你还需要将 html 的高度设置为 100%：http://jsfiddle.net/ARKVD/25/ - Felix Kling

很奇怪。无论如何，它在DIV中不起作用（我希望画布适应其父元素的大小）：http://jsfiddle.net/ARKVD/29/ - Giovanni Funchal

@GiovanniFunchal div 元素没有 width 和 height 属性。要使用CSS为其指定固定的高度和宽度。 - Some Guy

显示剩余6条评论

4个回答

6

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

canvasNode.style.position = 'absolute';

这将使其拥有独立于父元素的自身文档流。

- Imran

3

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

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

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

- Josh Langley

2

这将导致随着尺寸变大而出现像素化。调整样式高度会拉伸画布，但对其像素数量没有任何影响。渲染器需要更新。 - E10

0

我发现同样的问题，唯一的解决方法是将画布的高度设置为父元素高度减1。我使用的是CEF。在this的fiddle中，我不得不将其设置为parentHeight-5。

canvasNode.height = div.clientHeight - 5;

- Sam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Simon Sarris · Accepted Answer

最简单的方法是将画布始终放在自己的 div 中。

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

然后您可以使用 CSS 调整 div 的大小，任意调整。要将其设置为与 body 相同大小吗？给 div 添加 width: 100%。

然后您就可以随时正确地执行：

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

如果你这样做，你就不必再担心当前面临的问题，即当 body 是 div 的直接父元素时会出现奇怪的问题。