可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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;
}

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

See the code in action here: http://jsfiddle.net/ARKVD/24/

回答1:

The easiest thing to do is to always keep the canvas in its own div.

The only thing that will ever be in this div is the canvas.

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;

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.

回答2:

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.

回答3:

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 this fiddle I had to set it to parentHeight - 5.

canvasNode.height = div.clientHeight - 5;

回答4:

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