HTML5画布视图100% 宽度高度? ？

小开

<!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
}

小开

最佳答案

为了使画布的全屏宽度和高度始终如一，这意味着即使在浏览器调整大小时，也需要在一个将画布大小调整为 window.innerHeight和 window.innerWidth的函数中运行绘制循环。

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

超文本标示语言

<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()函数的画布上。

小开

你可以试试视窗单位(CSS3) :

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

小开

(扩大動静能量的答案)

样式画布填充主体。当渲染到画布时要考虑它的大小。

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

小开

我将回答一个更一般的问题，即如何让画布在调整窗口大小时动态调整大小。接受的答案适当地处理了宽度和高度都应该为100% 的情况，这是要求的，但也会改变画布的纵横比。许多用户会希望画布在调整窗口大小时调整大小，但同时保持长宽比不变。这不是确切的问题，但它“适合”，只是把问题放在一个稍微更一般的上下文。

窗口将有一些高宽比(宽高比) ，画布对象也是如此。你希望这两个方面的比率如何相互关联是你必须清楚的一件事，对于这个问题没有“一刀切”的答案-我将通过一些你可能想要的常见案例。

最重要的是您必须清楚: html 画布对象有一个 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% ，但是长宽比变化的答案与拉伸图像是不同的。然后，你需要重新绘制，并按照已接受的答案中列出的方式来进行。

小提琴: 重画

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

小提琴: 修好了

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

小开

我也在寻找这个问题的答案，但是这个被接受的答案对我来说太突然了。显然，使用 window.innerWidth 是不可移植的。它在一些浏览器中确实可以工作，但是我注意到 Firefox 并不喜欢它。

Gregg Tavares 在这里发布了一个很棒的资源，直接解决了这个问题: Http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (参见反模式 # 的3和4)。

使用 cabas.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();

小开

对于手机来说，最好使用它

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

因为它会显示不正确后，改变方向。将方向更改为纵向时，“视图”将增加。看完了例子