时间戳

首页 > 解决方案 > 如何为 emscripten 制作无边框的 HTML 画布

html - 如何为 emscripten 制作无边框的 HTML 画布

问题描述

我有一个简单的 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>

截图在这里

标签： htmlemscripten

解决方案

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

例子：

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

推荐阅读