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();
<!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();
