为什么我需要让我的电子 window 比我的 canvas 大？

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>

前台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"

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

如何让 window 和 canvas 大小相同？

Answer 1

width 和 height properties/attributes 表示 canvas 的坐标 space，而不是元素的尺寸。

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

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

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

见canvas attributes documentation

Answer 2

您在 BrowserWindow 选项中指定的尺寸不是主体的尺寸，而是 window 的尺寸，包括边框。

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

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

为什么我需要让我的电子 window 比我的 canvas 大？

Why do I need to make my electron window bigger than my canvas?

html

javascript

canvas

electron