HTML5 Canvas 100%宽度的视口高度?

我正在尝试创build占据视口宽度和高度100%的canvas元素。

您可以在我的示例中看到正在发生的事情,但是它正在Chrome和FireFox中添加滚动条。 我怎样才能防止额外的滚动条,并提供正确的窗口的宽度和高度作为canvas的大小?

为了使canvas始终保持全屏的宽度和高度,即使在浏览器被resize时,也需要在调整canvas大小的函数中运行绘制循环到window.innerHeight和window.innerWidth。

例如: http : //jsfiddle.net/jaredwilli/qFuDr/

HTML

<canvas id="canvas"></canvas> 

JavaScript的

 (function() { var canvas = document.getElementById('canvas'), 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 */ 

这就是如何正确地使浏览器的canvas完整宽度和高度。 您只需将绘图的所有代码放在drawStuff()函数的canvas中即可。

您可以尝试视口单位 (CSS3):

 canvas { height: 100vh; width: 100vw; display: block; } 

我将回答更一般的问题,如何在调整窗口大小时dynamicresize。 被接受的答案适当地处理了宽度和高度都被认为是100%的情况,这是被要求的,但是这也将改变canvas的宽高比。 许多用户会希望canvas调整窗口大小,但保持高宽比不变。 这不是确切的问题,但它“适合”,只是把问题放到一个稍微更一般化的背景中。

窗口将有一些宽高比(宽度/高度),canvas对象也是如此。 如何让这两个宽高比相互关联是一件事情,你必须清楚,对这个问题没有“一刀切”的答案 – 我会通过你可能会遇到的一些常见案例想。

最重要的是你必须清楚:HTMLcanvas对象具有宽度属性和高度属性; 然后,同一个对象的css也有宽度和高度属性。 这两个宽度和高度是不同的,都是有用的不同的东西。

更改宽度和高度属性是一种可以随时更改canvas大小的方法,但是必须重新绘制所有内容,这需要时间并不总是必要的,因为可以完成一些大小的更改通过CSS的属性,在这种情况下,你不重画canvas。

我看到了4种情况,您可能想要在窗口大小调整上发生什么(全部以全屏幕canvas开始)

1:您希望宽度保持100%,并且您希望宽高比保持原样。 在这种情况下,您不需要重画canvas。 你甚至不需要一个窗口大小处理程序。 所有你需要的是

 $(ctx.canvas).css("width", "100%"); 

其中ctx是您的canvas上下文。 小提琴: resizeByWidth

2:您希望宽度和高度都保持100%,并且您希望由此产生的纵横比变化具有拉伸图像的效果。 现在,您仍然不需要重新绘制canvas,但是您需要一个窗口大小调整处理程序。 在处理程序中,你这样做

 $(ctx.canvas).css("height", window.innerHeight); 

小提琴: messWithAspectratio

3:你希望宽度和高度都保持100%,但是对高宽比变化的回答与拉伸图像是不同的。 然后,您需要重新绘制,并按照接受的答案中概述的方式进行。

小提琴: 重绘

4:你想在页面加载时宽度和高度都是100%,但是之后保持不变(对窗口大小没有反应。

小提琴: 固定

所有的小提琴都有相同的代码,除了模式设置的第63行。 您也可以复制小提琴代码在本地机器上运行,在这种情况下,您可以通过查询string参数来select模式,例如?mode = redraw

我也想find这个问题的答案,但接受的答案是打破了我。 显然使用window.innerWidth是不可移植的。 它在一些浏览器中工作,但我注意到Firefox不喜欢它。

Gregg Tavares在这里直接解决了这个问题: http : //webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (参见反模式#的第3和4章)。

使用canvas.clientWidth而不是window.innerWidth似乎很好地工作。

这是Greggbuild议的渲染循环:

 function resize() { var width = gl.canvas.clientWidth; var height = gl.canvas.clientHeight; if (gl.canvas.width != width || gl.canvas.height != height) { gl.canvas.width = width; gl.canvas.height = height; return true; } return false; } var needToRender = true; // draw at least once function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } checkRender(); 

http://jsfiddle.net/mqFdk/10/

 <!DOCTYPE html> <html> <head> <title>aj</title> </head> <body> <canvas id="c"></canvas> </body> </html> 

与CSS

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

(扩大动静能量的答案)

风格canvas填补身体。 渲染到canvas时考虑其大小。

http://jsfiddle.net/mqFdk/356/

 <!DOCTYPE html> <html> <head> <title>aj</title> </head> <body> <canvas id="c"></canvas> </body> </html> 

CSS:

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

使用Javascript:

 function redraw() { var cc = c.getContext("2d"); c.width = c.clientWidth; c.height = c.clientHeight; cc.scale(c.width, c.height); // Draw a circle filling the canvas. cc.beginPath(); cc.arc(0.5, 0.5, .5, 0, 2*Math.PI); cc.fill(); } // update on any window size change. window.addEventListener("resize", redraw); // first draw redraw();