为什么document.documentElement.clientWidth＆amp; clientHeight让我的画布300px乘150 px？

Question

我是javascript的新手，我一直在查找documentElement，clientWidth＆amp; clientHeight并试图弄清楚为什么它将我的画布设置为300px×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

问题是代码中的拼写错误，因此代码永远不会运行。

更改

var canvas = document.getElementByID('canvas');

到

var canvas = document.getElementById('canvas');

注意小写d

Answer 2

＆＃34;身高＆＃34;和＆＃34;宽度＆＃34; canvas对象的属性控制画布坐标系的大小，而不是屏幕上元素的大小。如果您没有为此强加一些CSS规则，则会获得默认的屏幕尺寸。

Answer 3

看起来是默认的画布尺寸问题。看到这篇文章有类似的问题。我猜你是在Chrome吗？ canvas default size