logo标签列表

为什么我的 Electron 窗口需要比画布更大？

javascripthtmlcanvaselectron
3

JS

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 450, height: 600,
    'title' : 'Quantum Pilot', 'transparent' : true,
    'web-preferences' : {'allow-displaying-insecure-content' : true}});

HTML

<html>
<body bgcolor="black">
<center>
    <div id="game_container">
    </div>
</center>
</body>

前端JS
generateCanvas() {
    var canvas = document.createElement("canvas");
    Thing.prototype.scale = 1;
    canvas.width = 450 * Thing.prototype.scale;
    canvas.height = 600;

当我运行我的应用程序时，除非在html的body中使用style="overflow: hidden"，否则会出现滚动条。
我可以通过将50px添加到Electron窗口来去除滚动条。但是我对为什么会发生这种情况感到困惑。
如何使窗口和画布大小相同？
2个回答
3
0

width和height属性/特性表示画布的坐标空间，而不是元素的尺寸。

使用<canvas style="width: 450px; height: 600px;"></canvas>来指定画布的尺寸。

或者更简单地说，如果你想要全屏显示：<canvas style="width: 100vw; height: 100vh;"></canvas>

还要检查<body>或<html>是否没有填充或边距。

请参阅画布属性文档。

没有填充，但是在画布上使用那种样式没有解决问题...正在尝试vh。 - quantumpotato
也许你可以在你的问题中更新文件，例如我没有看到CSS或canvas元素 ;) 这将有助于解决你的问题。 - martpie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接