如何在只有画布的情况下摆脱 emscripten 徽标和控制台？答案

【问题标题】：How to get rid of emscripten logo and console while only having a canvas?如何在只有画布的情况下摆脱 emscripten 徽标和控制台？
【发布时间】：2021-04-20 08:52:30
【问题描述】：

每当我用emcc main.c -o index.html 编译我的C 代码时，emscripten 都会生成一个带有他们的徽标、一些按钮和控制台的html 文件。但我不想要那些。我只想要可以显示我的 SDL 渲染内容的画布。

我做了一些研究，发现this question in stack overflow。显然你必须输入 emcc --shell-file 并给它一些模板 html 作为参数。

所以我做了一个这样的模板html文件

<html>
   <head>
      <title>Some title</title>
   </head>
   <body>
   </body>
</html>

但是当我运行emcc main.c -o index.html --shell-file template.html 时，它给出了一个错误。显然 emscripten 寻找一些想法 - {{{ SCRIPT }}}。

所以我在我的身体里添加了{{{ SCRIPT }}}。它编译得很好。但是当我在localhost:3000 中运行我的index.html 时，我在控制台中遇到了一个错误，上面写着cannot find addEventListener of undefined。

[注：我正在运行一个 SDL 程序。 The one mentioned in their docs

我该怎么办？提前致谢

【问题讨论】：

你为什么不找到默认的模板文件并编辑那个？
我查看了那个文件，对我来说似乎是一团糟。当然，我可以慢慢阅读每个标签在做什么，但感觉不是解决我的问题的正确方法。我正在寻找一种更简单的方法，或者一个已经构建的没有徽标的模板和所有（我在任何地方都没有找到）
也许 shell_minimal.html 就是那个。 github.com/emscripten-core/emscripten/blob/main/src/…

标签： javascript c sdl webassembly emscripten

【解决方案1】：

Here 是一个最小示例，您可以将其用作您的index.html，假设您的画布代码位于index.js：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

    <!-- Create the canvas that the C++ code will draw into -->
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <!-- Allow the C++ to access the canvas element --> 
    <script type='text/javascript'>
        var Module = {
            canvas: (function() { return document.getElementById('canvas'); })()
        };
    </script>
    
    <!-- Add the javascript glue code (index.js) as generated by Emscripten -->
    <script src="index.js"></script>
    
</body>

</html>

【讨论】：