HTML5 画布调整为父级

2022-01-17 00:00:00 canvas dom javascript html html5-canvas

我想调整画布元素的大小，以便适合其父元素，无论是 <body> (全屏")还是一些 <div>例如.这是我的尝试:

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:

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

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

For some reason, the canvas doesn't stop growing! Maybe client* aren't the right parameters?

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

推荐答案

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

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.

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

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%.

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

Then you can always rightfully do:

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

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

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.

相关文章