为什么电子窗口在我的画布周围有边框？答案

【问题标题】：Why does Electron window have a border around my canvas?为什么电子窗口在我的画布周围有边框？
【发布时间】：2016-08-17 05:46:03
【问题描述】：

上下边框：

那条红线正在绘制：

Deadline.prototype.draw = function(client, context) {
    var percent = this.charge / this.maxCharge;
    context.fillStyle = "#FF0000";
    var w = percent * client.canvas.width;
    client.drawRect((client.canvas.width / 2) - 0.5 * w, this.y, w, 2, context.fillStyle);
}

当百分比为 100 时，它从左侧几个像素处开始。

<html>
<body bgcolor="black" style="overflow: hidden">
    <div id="game_container">
        <canvas id="canvas" style= "width: 450; height: 600;">
        </canvas>
    </div>
</body>

来自电子 main.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}});
  mainWindow.loadURL('file://' + __dirname + '/game.html');

【问题讨论】：

可能是body { margin: 8px; }，这是Chrome默认添加的。尝试为其添加重置样式，例如 body { margin: 0; }
这可以解释它来自顶部和左侧吗？
当我尝试时，我现在在我的窗口中看到滚动条，即使画布和窗口的大小应该相同
你应该在你的样式定义中放一个分号，而不是逗号：style="overflow: hidden; margin: 0px"，否则样式不能被正确识别。我猜由于overflow: hidden，它只能从左侧看到。但总的来说这只是一个猜测，我不确定它是否能解决你的问题。

标签： css html5-canvas electron

【解决方案1】：

如果您使用mainWindow.setResiazble(false)，可能会出现黑色边框。解决方法是preventDefault()will-resize 事件。

// We don't need you.
// mainWindow.setResizable(false);

// Use this instead.
mainWindow.on("will-resize", e => {
    e.preventDefault();
});

如果您以后不更新该值，您可以将resize: false 添加到BrowserWindow

const mainWindow = new BrowserWindow({
    // ...
    resizable: false,
});

【讨论】：