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

Posted

技术标签:

【中文标题】如何为 emscripten 制作无边框的 HTML 画布【英文标题】:How to make HTML canvas for emscripten without borders 【发布时间】: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

【问题讨论】:

【参考方案1】:

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

例子:

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

【讨论】:

就是这样,谢谢!

以上是关于如何为 emscripten 制作无边框的 HTML 画布的主要内容,如果未能解决你的问题,请参考以下文章

Antd - 如何为表格行制作圆角边框?

VC MFC中如何制作无边框窗口

如何创建标准无边框按钮(如提到的设计指南中)?

HTML / CSS - 如何为整个表格制作一张背景图片[关闭]

如何为文本添加一些边框? [复制]

如何为 UIPickerView 添加边框?