定义画布时使用clientHeight / Width的问题

Question

我正在开始一个小的javascript项目，我想将画布定义为用户的视口大小，所以clientHeight / Width

但是当我使用这种方法时：

<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
</canvas>

<script>

    myCanvas.height = document.documentElement.clientHeight;
    myCanvas.width = document.documentElement.clientWidth;
    console.log(screen.height);


    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(20,20,150,100);



</script>

我的画布对于屏幕来说有点太大了，所以有滚动条 正如你在这里看到的

那么我应该如何使画布完全符合客户的大小呢？感谢

Answer 1

首先，body具有默认边距。

body { margin: 0; }

但是画布仍然将窗口向下推一点，因为它的行为类似于嵌入式元素。

canvas { display: block; }

现在（假设像示例一样，它上面没有边框，或者您使用box-sizing: border-box），画布的高度和宽度不应太大而不能容纳在窗口中。提防body顶部的页边空白，因为它们仍然会向下推画布并导致更多滚动条。