HTML5 Canvas 100％视口宽度？

Question

我正在尝试创建一个占用视口宽度和高度100％的画布元素。你可以在我的例子看到这里正在发生，但它是在Chrome和FireFox中添加滚动条。如何防止额外的滚动条，只提供窗口的宽度和高度作为画布的大小？

Answer 1

您可以尝试视口单元（CSS3）：

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

Answer 2

我将回答更一般的问题，即如何在窗口调整大小时使画布动态调整大小。接受的答案适当地处理宽度和高度都应该是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％，但宽高比变化的答案与拉伸图像不同。然后你需要重绘，并按照接受的答案中概述的方式进行重绘。

小提琴：重绘

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

小提琴：固定

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