如何为 emscripten 制作无边框的 HTML 画布答案

【问题标题】：How to make HTML canvas for emscripten without borders如何为 emscripten 制作无边框的 HTML 画布
【发布时间】：2021-10-27 13:56:21
【问题描述】：

我有一个简单的 C++ SDL2 程序，我正在使用 emscripten 在浏览器中运行它。 Emscripten 生成两个文件（javascript 和 webassembly）并将所有内容呈现到 HTML 画布中。我在互联网上找到了这个简单的 HTML 画布，它工作得很好，但由于某种原因，它的左侧和顶部都有白色边框。如何删除这些边框？这是 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
        <script type='text/javascript'>
            var Module = {
                canvas: (function() { return document.getElementById('canvas'); })()
            };
        </script>
        <script src="index.js"></script>
    </body>
</html>

screenshot here

【问题讨论】：

标签： html emscripten

【解决方案1】：

这是 body-element 上的浏览器默认边距。您可以通过向 head-element 添加一些 CSS 来删除它。

例子：

<style>
    body {
        margin: 0;
    }
</style>

【讨论】：

就是这样，谢谢！