javascript - 为什么 document.documentElement.clientWidth 和 clientHeight 使我的 Canvas 为 300 像素 x 150 像素？

Question

我对 javascript 有点陌生，我一直在查找 documentElement、clientWidth 和 clientHeight 并试图找出为什么它将我的 Canvas 设置为 300px x 150px 的大小。也许我不明白它是如何获得这些维度的。谁能帮忙解释一下吗？

这是我当前的代码

<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementByID('canvas');
var ctx = canvas.getContext('2d');

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
</script>

Answer 1

canvas对象的“height”和“width”属性控制canvas坐标系的大小，而不是屏幕上元素的大小。如果您不为此强加一些 CSS 规则，您将获得默认的屏幕尺寸。