blocks|key|1079719|text|http://jsfiddle.net/mqFdk/10/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1079720|<!DOCTYPE+html>
<html>
<head>
++++<title>aj</title>
</head>
<body>

++++<canvas+id="c"></canvas>

</body>
</html>|code-block|syntax|javascript|1079721|使用CSS|1079722|body+{+
+++++++margin:+0;+
+++++++padding:+0
+++++}
#c+{+
+++++position:+absolute;+
+++++width:+100%25;+
+++++height:+100%25;+
+++++overflow:+hidden
+++}|1079723|entityMap|0|LINK|mutability|MUTABLE|url^0|0|T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|4]]]]

<a href="http://jsfiddle.net/mqFdk/10/" rel="noreferrer">http://jsfiddle.net/mqFdk/10/</a>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;aj&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

 &lt;canvas id="c"&gt;&lt;/canvas&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

with CSS

<pre class="lang-css prettyprint-override"><code>body { 
 margin: 0; 
 padding: 0
 }
#c { 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 overflow: hidden
 }
</code></pre>

blocks|key|865142|text|为了使画布始终全屏显示宽度和高度，这意味着即使调整了浏览器的大小，也需要在将画布调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|865143|示例：http://jsfiddle.net/jaredwilli/qFuDr/|865144|HTML|865145|<canvas+id="canvas"></canvas>|code-block|syntax|javascript|865146|JavaScript|865147|(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
++}
})();|865148|CSS|865149|*+{+margin:0;+padding:0;+}+/*+to+remove+the+top+and+left+whitespace+*/

html,+body+{+width:100%25;+height:100%25;+}+/*+just+to+be+sure+these+are+full+screen*/

canvas+{+display:block;+}+/*+To+remove+the+scrollbars+*/|865150|这就是如何正确地使画布达到浏览器的全宽和全高。您只需将绘制所需的所有代码放在drawStuff()函数中。|865151|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jaredwilli/qFuDr/^0|17|I|1Q|H|0|3|11|0|0|0|0|0|0|0|0|12|B|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|1K|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

In order to make the canvas full-screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the <code>window.innerHeight</code> and <code>window.innerWidth</code>.
Example: <a href="http://jsfiddle.net/jaredwilli/qFuDr/" rel="noreferrer">http://jsfiddle.net/jaredwilli/qFuDr/</a>
<h4>HTML</h4>
<pre class="lang-html prettyprint-override"><code>&lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
</code></pre>
<h4>JavaScript</h4>
<pre class="lang-js prettyprint-override"><code>(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
 }
})();
</code></pre>
<h4>CSS</h4>
<pre class="lang-css prettyprint-override"><code>* { 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 */
</code></pre>
That is how you properly make the canvas full width and height of the browser. You just have to put all the code for drawing to the canvas in the <code>drawStuff()</code> function.

blocks|key|1079787|text|您可以尝试viewport+units+(CSS3)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1079788|canvas+{+
++height:+100vh;+
++width:+100vw;+
++display:+block;
}|code-block|syntax|javascript|1079789|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-values/#viewport-relative-lengths^0|5|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can try <a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="noreferrer">viewport units</a> (CSS3):

<pre><code>canvas { 
 height: 100vh; 
 width: 100vw; 
 display: block;
}
</code></pre>

blocks|key|1079819|text|(在動靜能量回答的基础上进行扩展)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079820|设置画布样式以填充正文。渲染到画布时，请考虑画布的大小。|1079821|http://jsfiddle.net/mqFdk/356/|offset|length|1079822|<!DOCTYPE+html>
<html>
<head>
++++<title>aj</title>
</head>
<body>

++++<canvas+id="c"></canvas>

</body>
</html>|code-block|syntax|javascript|1079823|CSS：|1079824|body+{+
+++++++margin:+0;+
+++++++padding:+0
+++++}
#c+{+
+++++position:+absolute;+
+++++width:+100%25;+
+++++height:+100%25;+
+++++overflow:+hidden
+++}|1079825|Javascript：|1079826|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();|1079827|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|U|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$F|14|G|15|1|16]]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|E]]]]

(Expanding upon 動靜能量's answer)

Style the canvas to fill the body. When rendering to the canvas take its size into account.

<a href="http://jsfiddle.net/mqFdk/356/" rel="nofollow">http://jsfiddle.net/mqFdk/356/</a>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;aj&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

 &lt;canvas id="c"&gt;&lt;/canvas&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

CSS:

<pre class="lang-css prettyprint-override"><code>body { 
 margin: 0; 
 padding: 0
 }
#c { 
 position: absolute; 
 width: 100%; 
 height: 100%; 
 overflow: hidden
 }
</code></pre>

Javascript:


<pre><code>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();
</code></pre>

blocks|key|1079917|text|我将回答更一般的问题，即如何在调整窗口大小时动态调整画布的大小。被接受的答案适当地处理了宽度和高度都应该是100%25的情况，这是要求的，但这也会改变画布的纵横比。许多用户希望画布在调整窗口大小时调整大小，但同时保持纵横比不变。这不是确切的问题，但它“适合”，只是把问题放在一个稍微更一般的上下文中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079918|窗口将具有一定的纵横比(宽度/高度)，画布对象也是如此。你希望这两个宽高比如何相互关联是你必须弄清楚的一件事，这个问题没有“一刀切”的答案--我将通过一些常见的案例来说明你可能想要什么。|1079919|最重要的是，您必须清楚:+html+canvas对象有一个width属性和一个height属性；然后，同一对象的css也有一个width和height属性。这两个宽度和高度是不同的，它们对不同的事情都很有用。|1079920|更改宽度和高度属性是一种方法，您总是可以使用该方法更改画布的大小，但随后您必须重新绘制所有内容，这将需要时间，而且并不总是必要的，因为可以通过css属性完成一定数量的大小更改，在这种情况下，您不需要重新绘制画布。|1079921|我看到了4种你可能希望在调整窗口大小时发生的情况(都是从全屏画布开始的)|1079922|1:您希望宽度保持100%25，并且希望纵横比保持不变。在这种情况下，您不需要重新绘制画布；您甚至不需要窗口大小调整处理程序。你所需要的是|1079923|$(ctx.canvas).css("width",+"100%25");|code-block|syntax|javascript|1079924|其中ctx是您的画布上下文。小提琴：resizeByWidth|offset|length|1079925|2:您希望宽度和高度都保持100%25，并且希望由此产生的纵横比更改具有拉伸图像的效果。现在，您仍然不需要重新绘制画布，但是需要一个窗口大小调整处理程序。在处理程序中，您需要|1079926|$(ctx.canvas).css("height",+window.innerHeight);|1079927|小提琴：messWithAspectratio|1079928|3:您希望宽度和高度都保持100%25，但对宽高比变化的回答与拉伸图像不同。然后，您需要重新绘制，并按照公认答案中概述的方式进行绘制。|1079929|小提琴：redraw|1079930|4:您希望页面加载时宽度和高度为100%25，但此后保持不变(对窗口大小调整没有反应。|1079931|小提琴：fixed|1079932|除了设置了模式的第63行之外，所有小提琴都有相同的代码。您还可以将小提琴代码复制到本地计算机上运行，在这种情况下，您可以通过查询字符串参数选择模式，如?mode=redraw|1079933|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/mathheadinclouds/h8xyh/5/|1|http://jsfiddle.net/mathheadinclouds/dkD6b/2/|2|http://jsfiddle.net/mathheadinclouds/vMh2F/2/|3|http://jsfiddle.net/mathheadinclouds/EChLc/2/^0|0|0|0|0|0|0|0|I|D|0|0|0|0|4|J|1|0|0|4|6|2|0|0|4|5|3|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1T|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@$S|1W|T|1X|1|1Y]]|A|$]]|$1|U|3|V|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|20|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|21|8|@]|9|@$S|22|T|23|1|24]]|A|$]]|$1|10|3|11|5|6|7|25|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|26|8|@]|9|@$S|27|T|28|1|29]]|A|$]]|$1|14|3|15|5|6|7|2A|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2B|8|@]|9|@$S|2C|T|2D|1|2E]]|A|$]]|$1|18|3|19|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H]]|1I|$5|1D|1E|1F|A|$1G|1J]]|1K|$5|1D|1E|1F|A|$1G|1L]]|1M|$5|1D|1E|1F|A|$1G|1N]]]]

I'll answer the more general question of how to have a canvas dynamically adapt in size upon window resize. The accepted answer appropriately handles the case where width and height are both supposed to be 100%, which is what was asked for, but which also will change the aspect ratio of the canvas. Many users will want the canvas to resize on window resize, but while keeping the aspect ratio untouched. It's not the exact question, but it "fits in", just putting the question into a slightly more general context.

The window will have some aspect ratio (width / height), and so will the canvas object. How you want these two aspect ratios to relate to each other is one thing you'll have to be clear about, there is no "one size fits all" answer to that question - I'll go through some common cases of what you might want.

Most important thing you have to be clear about: the html canvas object has a width attribute and a height attribute; and then, the css of the same object also has a width and a height attribute. Those two widths and heights are different, both are useful for different things.

Changing the width and height attributes is one method with which you can always change the size of your canvas, but then you'll have to repaint everything, which will take time and is not always necessary, because some amount of size change you can accomplish via the css attributes, in which case you do not redraw the canvas.

I see 4 cases of what you might want to happen on window resize (all starting with a full screen canvas)

1: you want the width to remain 100%, and you want the aspect ratio to stay as it was. In that case, you do not need to redraw the canvas; you don't even need a window resize handler. All you need is

<pre><code>$(ctx.canvas).css("width", "100%");
</code></pre>

where ctx is your canvas context.
fiddle: <a href="http://jsfiddle.net/mathheadinclouds/h8xyh/5/" rel="noreferrer">resizeByWidth</a>

2: you want width and height to both stay 100%, and you want the resulting change in aspect ratio to have the effect of a stretched-out image. Now, you still don't need to redraw the canvas, but you need a window resize handler. In the handler, you do

<pre><code>$(ctx.canvas).css("height", window.innerHeight);
</code></pre>

fiddle: <a href="http://jsfiddle.net/mathheadinclouds/dkD6b/2/" rel="noreferrer">messWithAspectratio</a>

3: you want width and height to both stay 100%, but the answer to the change in aspect ratio is something different from stretching the image. Then you need to redraw, and do it the way that is outlined in the accepted answer.

fiddle: <a href="http://jsfiddle.net/mathheadinclouds/vMh2F/2/" rel="noreferrer">redraw</a>

4: you want the width and height to be 100% on page load, but stay constant thereafter (no reaction to window resize.

fiddle: <a href="http://jsfiddle.net/mathheadinclouds/EChLc/2/" rel="noreferrer">fixed</a>

All fiddles have identical code, except for line 63 where the mode is set. You can also copy the fiddle code to run on your local machine, in which case you can select the mode via a querystring argument, as ?mode=redraw

blocks|key|1079992|text|我也在寻找这个问题的答案，但被接受的答案对我来说是不可接受的。显然，使用window.innerWidth是不可移植的。它确实可以在某些浏览器中使用，但我注意到Firefox并不喜欢它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079993|Gregg+Tavares在这里发布了一个很好的资源，直接解决了这个问题：http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html+(参见反模式#的3和4)。|offset|length|1079994|使用canvas.clientWidth而不是window.innerWidth似乎工作得很好。|1079995|下面是Gregg建议的渲染循环：|1079996|function+resize()+{
++var+width+=+gl.canvas.clientWidth;
++var+height+=+gl.canvas.clientHeight;
++if+(gl.canvas.width+!=+width+%7C%7C
++++++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()+%7C%7C+needToRender)+{
+++++needToRender+=+false;
+++++drawStuff();
+++}
+++requestAnimationFrame(checkRender);
}
checkRender();|code-block|syntax|javascript|1079997|entityMap|0|LINK|mutability|MUTABLE|url|http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html^0|0|11|1V|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I was looking to find the answer to this question too, but the accepted answer was breaking for me. Apparently using window.innerWidth isn't portable. It does work in some browsers, but I noticed Firefox didn't like it.

Gregg Tavares posted a great resource here that addresses this issue directly:
<a href="http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html">http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html</a>
(See anti-pattern #'s 3 and 4).

Using canvas.clientWidth instead of window.innerWidth seems to work nicely.

Here's Gregg's suggested render loop:

<pre><code>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();
</code></pre>

blocks|key|865407|text|对于手机来说，最好使用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|865408|canvas.width+=+document.documentElement.clientWidth;
canvas.height+=+document.documentElement.clientHeight;|code-block|syntax|javascript|865409|因为更改orientation.The后显示不正确，所以将方向更改为portrait.See+full+example时，视口将增加|offset|length|865410|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dzanis/qkp8x3ca/^0|0|0|1G|7|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

For mobiles, it’s better to use it 

<pre><code>canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
</code></pre>

because it will display incorrectly after changing the orientation.The “viewport” will be increased when changing the orientation to portrait.See full 
<a href="http://jsfiddle.net/dzanis/qkp8x3ca/" rel="nofollow noreferrer">example</a>

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. 

You can see in my example <a href="http://jsfiddle.net/mqFdk/">here</a> that is occurring, however it is adding scroll bars in both Chrome and FireFox. How can I prevent the extra scroll bars and just provide exactly the width and height of the window to be the size of the canvas?

HTML5 Canvas 100% Width Height of Viewport?

我正在尝试创建一个画布元素，它占据了视口宽度和高度的100%。你可以在我的例子中看到正在发生，但是它在Chrome和FireFox中都添加了滚动条。怎样才能避免额外的滚动条，并且只提供与画布大小相同的窗口的宽度和高度？

问HTML5画布100%宽度视窗高度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布100%宽度视窗高度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布100%宽度视窗高度？
EN