如何为Emscripten创建无白边的HTML canvas并消除多余边界

白边产生原因 #

• 浏览器默认给body元素设置了8px的外边距，是顶部和左侧白边的核心来源
• canvas元素默认为行内块元素，存在默认的基线对齐偏移，可能额外产生间隙

修复代码 #

你只需要在原HTML的<head>标签中添加一段CSS样式重置即可，修改后的完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            canvas {
                display: block;
                outline: none;
            }
        </style>
    </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>

样式说明 #

• 通配符样式清除了所有元素的默认内外边距，统一盒模型规则
• html和body设置为占满整个视口，隐藏溢出内容，避免出现滚动条
• canvas设置为块级元素，消除行内元素默认的基线偏移间隙

内容的提问来源于stack exchange，提问作者Don Yanda