Question

在使用window.innerWidth和window.innerHeight选择画布宽度和高度时，应将画布宽度和高度设置为适合除工具栏和所有内容之外的屏幕，但不知何故它超出了html的高度和宽度。

<style>
    body, html {
        margin: 0;
        padding: 0;
    }


</style>    

<body>
<canvas id="myCanvas"></canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var c = myCanvas.getContext("2d");
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    myCanvas.style.backgroundColor = "#000000";
</script>
</body>

我该如何解决这个问题？我见过其他样本，但它们完全相同，但我的代码中没有。

Answer 1

我有这个issue，这是因为画布是一个内联元素。

为了使它不是内联元素，将其转换为块元素，如下所示：

canvas {
    display: block;
}

使用JS设置元素宽度超过html innerWidth

1 个答案: