Question

我想调整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/

Answer 1

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

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

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

然后你可以理所当然地做到：

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

如果你这样做，你就不必担心当身体是div的直接父母时你正面临的奇怪问题。

Answer 2

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

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

在这种情况下，高度设置只需保持4：3的比例。当然，如果你愿意的话，你也可以百分之百地做到这一点。

Answer 3

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

canvasNode.height = div.clientHeight - 5;

Answer 4

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

来确保子元素（画布）不会影响父级的大小

canvasNode.style.position = 'absolute';

这将它放入独立于父级的文档流中。

HTML5画布调整为父级

4 个答案: