canvas 的额外保证金

Question

我正在尝试制作一个完全适合方形浏览器的 canvas。问题是在屏幕的顶部和左侧不断增加这个额外的边距，我无法摆脱它。知道我该如何解决这个问题吗？

代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<style type="text/css">

#gameCanvas {
    background-color: blue;
}

</style>

<canvas id="gameCanvas"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("gameCanvas");  
    canvas.width = window.innerWidth;
    canvas.height = window.innerWidth;
</script>
<script src="cocos2d.js"></script>
</body>
</html>

Answer 1

浏览器具有默认样式表，包括边距、填充等。试试这个：

body {
    padding: 0;
}

一般来说，CSS 重设在覆盖默认样式时会派上用场。

Answer 2

正如@Katherine Huang 所说，浏览器具有默认样式表，包括边距、填充...

您可以这样设置：

html, body{
    margin:0;
    padding:0;
}
#gameCanvas{
    margin:0;
    padding:0;
    background-color: blue;
}

现在您必须为正文中的每个新元素设置特定的边距和边距，因为默认情况下它们的值为 0。

canvas 的额外保证金

Extra margin in canvas

html

javascript

css

margin