Javascript 使画布填满整个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3707151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make canvas fill the whole page
提问by Sergei Basharov
How can I make canvas be 100% in width and height of the page?
如何使画布在页面的宽度和高度上达到 100%？
回答by Ian Devlin
Well I have it working here: Are Google's Bouncing Balls HTML5?by using the following CSS:
好吧，我在这里工作：Google 的弹跳球是 HTML5 吗？通过使用以下 CSS：
* { margin: 0; padding: 0;}
body, html { height:100%; }
#c {
position:absolute;
width:100%;
height:100%;
}
Where #c is the id of the canvas element.
其中 #c 是画布元素的 id。
回答by Didats Triadi
you can use these codes without jquery
你可以在没有 jquery 的情况下使用这些代码
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
回答by sunderls
This has something to do with <canvas>tag.
这与<canvas>标签有关。
when create fullscreen canvas, <canvas>will cause scrollbar if not set to display:block.
创建全屏画布时，<canvas>如果未设置为 display:block 将导致滚动条。
detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen
详细信息：http: //browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen
回答by Pixsa
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
maybe that easy?
也许那么容易？
回答by Castrohenge
You can programatically set the canvas width + height:
您可以以编程方式设置画布宽度 + 高度：
// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();
I've tested this and it as long as you redraw what's on the canvas after you've resized it won't change the scaling.
我已经对此进行了测试，只要您在调整大小后重新绘制画布上的内容，它就不会改变缩放比例。
回答by Kintaro
Does this work for you?
这对你有用吗？
<html>
<body style="height: 100%; margin: 0;">
<canvas style="width: 100%; height: 100%;"></canvas>
</body>
</html>
from Force canvas element in html to take up the entire window?
回答by Rama Ganapathy
on my observations this runs effectively, and gives a blue shade
根据我的观察，这有效地运行，并给出了蓝色阴影
var c = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var g = ctx.createLinearGradient(0, 0, c.width, c.height);
// light blue color
g.addColorStop(0, '#8ED6FF');
// dark blue color
g.addColorStop(1, '#004CB3');
context.fillStyle = g;
context.fill();
<script>
var c = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var g = ctx.createLinearGradient(0, 0, c.width, c.height);
// light blue color
g.addColorStop(0, '#8ED6FF');
// dark blue color
g.addColorStop(1, '#004CB3');
context.fillStyle = g;
context.fill();
</scriphtml,body
{
height:98.0%;
width:99.5%;
}
canvas
{
display:block;
width:100%;
height:100%;
}<html>
<body>
<canvas id="can"></canvas>
</body>
</html>