[英]Make canvas fill the whole page
如何使画布在页面的宽度和高度上达到100%?
好吧,我有它在这里工作: 谷歌的Bouncing Balls HTML5? 使用以下CSS:
* { margin: 0; padding: 0;}
body, html { height:100%; }
#c {
position:absolute;
width:100%;
height:100%;
}
其中#c是canvas元素的id。
您可以在没有jquery的情况下使用这些代码
var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
这与<canvas>
标签有关。
在创建全屏画布时, <canvas>
将导致滚动条(如果未设置为display:block)。
详情: http : //browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen
您可以以编程方式设置画布宽度+高度:
// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();
我已经测试了这个和它,只要你在重新调整大小后重绘画布上的内容就不会改变缩放。
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
也许这很容易?
在我的观察中,这有效地运行,并给出蓝色阴影
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>
这对你有用吗?
<html>
<body style="height: 100%; margin: 0;">
<canvas style="width: 100%; height: 100%;"></canvas>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.