HTML5画布100%宽度视窗高度？
我正在尝试创建一个画布元素，它占据了视口宽度和高度的100%。
你可以在我的例子中看到here正在发生，但是它在Chrome和FireFox中都添加了滚动条。怎样才能避免额外的滚动条，并且只提供与画布大小相同的窗口的宽度和高度？
回答 7
Stack Overflow用户
发布于 2011-12-13 16:40:23
为了使画布始终全屏显示宽度和高度，这意味着即使调整了浏览器的大小，也需要在将画布调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。
示例：http://jsfiddle.net/jaredwilli/qFuDr/
HTML
<canvas id="canvas"></canvas>JavaScript
(function() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
// do your drawing stuff here
}
})();CSS
* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */这就是如何正确地使画布达到浏览器的全宽和全高。您只需将绘制所需的所有代码放在drawStuff()函数中。
Stack Overflow用户
发布于 2013-05-27 08:14:31
您可以尝试viewport units (CSS3)：
canvas {
height: 100vh;
width: 100vw;
display: block;
}Stack Overflow用户
发布于 2013-12-03 10:57:43
我将回答更一般的问题，即如何在调整窗口大小时动态调整画布的大小。被接受的答案适当地处理了宽度和高度都应该是100%的情况，这是要求的，但这也会改变画布的纵横比。许多用户希望画布在调整窗口大小时调整大小，但同时保持纵横比不变。这不是确切的问题，但它“适合”，只是把问题放在一个稍微更一般的上下文中。
窗口将具有一定的纵横比(宽度/高度)，画布对象也是如此。你希望这两个宽高比如何相互关联是你必须弄清楚的一件事，这个问题没有“一刀切”的答案--我将通过一些常见的案例来说明你可能想要什么。
最重要的是，您必须清楚: html canvas对象有一个width属性和一个height属性；然后，同一对象的css也有一个width和height属性。这两个宽度和高度是不同的，它们对不同的事情都很有用。
更改宽度和高度属性是一种方法，您总是可以使用该方法更改画布的大小，但随后您必须重新绘制所有内容，这将需要时间，而且并不总是必要的，因为可以通过css属性完成一定数量的大小更改，在这种情况下，您不需要重新绘制画布。
我看到了4种你可能希望在调整窗口大小时发生的情况(都是从全屏画布开始的)
1:您希望宽度保持100%，并且希望纵横比保持不变。在这种情况下，您不需要重新绘制画布；您甚至不需要窗口大小调整处理程序。你所需要的是
$(ctx.canvas).css("width", "100%");其中ctx是您的画布上下文。小提琴：resizeByWidth
2:您希望宽度和高度都保持100%，并且希望由此产生的纵横比更改具有拉伸图像的效果。现在，您仍然不需要重新绘制画布，但是需要一个窗口大小调整处理程序。在处理程序中，您需要
$(ctx.canvas).css("height", window.innerHeight);3:您希望宽度和高度都保持100%，但对宽高比变化的回答与拉伸图像不同。然后，您需要重新绘制，并按照公认答案中概述的方式进行绘制。
小提琴：redraw
4:您希望页面加载时宽度和高度为100%，但此后保持不变(对窗口大小调整没有反应。
小提琴：fixed
除了设置了模式的第63行之外，所有小提琴都有相同的代码。您还可以将小提琴代码复制到本地计算机上运行，在这种情况下，您可以通过查询字符串参数选择模式，如?mode=redraw
https://stackoverflow.com/questions/4288253
复制相似问题