Question

所以我试图在画布上显示全屏图像（减去80px标题），但是画布正在播放而不显示整个画面。

的Javascript

var c =document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();


img.onload = function() {
    ctx.drawImage(img, 0, 0);
    c.style.width = document.body.clientWidth;
    c.style.height = document.body.clientHeight-80;
};
img.src = "lol.gif";

以下是lol.gif {@ 3}}

的内容

但是，这就是它在网站上Look like的作用。紫色的酒吧应该在那里，那就是导航栏（当我做的时候）

感谢您的帮助。

Answer 1

默认情况下，canvas与窗口的大小不同。尝试设置画布宽度和高度，如下所示：

ctx.width = window.innerWidth;
ctx.height = window.innerHeight;

或者

ctx.width = document.body.clientWidth; 
ctx.height = document.body.clientHeight;

如果这是你喜欢的。取决于浏览器，请参阅

https://www.w3schools.com/js/js_window.asp

此外，您可能需要通过覆盖删除一些css默认值：

html, body, canvas {
    margin: 0;
    padding: 0;
}

全屏画布不显示整个图像

1 个答案: