我正在尝试创建一个画布元素,它占据了视口宽度和高度的100%。
你可以在我的例子中看到here正在发生,但是它在Chrome和FireFox中都添加了滚动条。怎样才能避免额外的滚动条,并且只提供与画布大小相同的窗口的宽度和高度?
发布于 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()
函数中。
发布于 2013-05-27 08:14:31
您可以尝试viewport units (CSS3):
canvas {
height: 100vh;
width: 100vw;
display: block;
}
发布于 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
复制相似问题