HTML

Question

我正在尝试创建一个占用视口宽度和高度100％的画布元素。

您可以在我的示例here中看到正在发生的情况，但它会在Chrome和FireFox中添加滚动条。如何防止额外的滚动条，只是提供窗口的宽度和高度作为画布的大小？

Answer 1

为了使画布全屏宽度和高度始终如此，即使在调整浏览器大小时，也需要在将画布大小调整为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 */

这就是你如何正确地使画布的全宽和高度的浏览器。您只需将绘制的所有代码放在drawStuff（）函数中的画布上。

Answer 2

您可以尝试viewport units（CSS3）：

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

Answer 3

我将回答更一般的问题，即如何在窗口调整大小时使画布动态调整大小。接受的答案适当地处理宽度和高度都应该是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);

小提琴：messWithAspectratio

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

小提琴：redraw

4：您希望页面加载时宽度和高度为100％，但此后保持不变（对窗口调整大小没有反应。

小提琴：fixed

所有小提琴具有相同的代码，但设置模式的第63行除外。您还可以复制小提琴代码以在本地计算机上运行，在这种情况下，您可以通过查询字符串参数选择模式，如？mode = redraw

Answer 4

我也想找到这个问题的答案，但接受的答案对我来说是打破了。显然使用window.innerWidth是不可移植的。它在某些浏览器中有效，但我注意到Firefox不喜欢它。

Gregg Tavares在这里发布了一个很好的资源，直接解决了这个问题： http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html （参见反模式＃3和4）。

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

这是Gregg建议的渲染循环：

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

Answer 5

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
   }

Answer 6

（扩大动静能量的答案）

设置画布样式以填充正文。渲染到画布时考虑其大小。

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

Answer 7

对于手机，最好使用

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

因为更改方向后它将无法正确显示。将方向更改为纵向时，“视口”将增加。查看完整 example

HTML5 Canvas 100％视口宽度？

7 个答案:

HTML

的JavaScript

CSS