Question

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>

Front JS

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

当我运行我的应用程序时，除非我在html style="overflow: hidden"中使用body，否则会出现滚动条。

我可以通过向Electron窗口添加50px来摆脱滚动条。但我很困惑为什么会这样。

如何制作一个窗口和画布大小相同？

Answer 1

您在BrowserWindow选项中指定的尺寸不是正文的尺寸，而是窗口的尺寸，包括框架。

如果您希望窗口内部与指定的选项相匹配，则应使用useContentSize: true

来自https://github.com/electron/electron/blob/master/docs/api/browser-window.md#class-browserwindow

Answer 2

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

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

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

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

请参阅canvas attributes documentation

为什么我需要让我的电子窗口比我的画布更大？

2 个答案: