使画布填满整个页面
[英]Make canvas fill the whole page
问题描述
如何使画布在页面的宽度和高度上达到100％？
7 个解决方案
解决方案1
34 已采纳 2010-09-14 09:25:05
Well I have it working here: Are Google's Bouncing Balls HTML5? 
好吧，我有它在这里工作： 谷歌的Bouncing Balls HTML5？ by using the following CSS: 使用以下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是canvas元素的id。
解决方案2
9 2010-09-14 14:01:09
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];
解决方案3
5 2015-07-03 10:04:12
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
解决方案4
1 2010-09-14 08:49:56
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. 我已经测试了这个和它，只要你在重新调整大小后重绘画布上的内容就不会改变缩放。
解决方案5
1 2018-05-19 22:50:59
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
maybe that easy? 也许这很容易？
解决方案6
0 2015-09-18 12:06:24
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(); </scrip
html,body { height:98.0%; width:99.5%; } canvas { display:block; width:100%; height:100%; }
<html> <body> <canvas id="can"></canvas> </body> </html>
解决方案7
0 2010-09-14 08:24:07
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? 从HTML中的Force canvas元素占用整个窗口？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.