最近在自学canvas的时候遇到一个问题，是关于在一块画布上面使用fillRect函数添加一个矩形的时候产生的高度问题。首先我们来看代码
<canvas id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas>```
我在这里，在页面上创建了一块画布。宽度为500px,高度为500px,展示的效果如下：
然后我使用JS对其进行矩形的添加
var a=document.getElementById("test1")var ctx1=a.getContext("2d");ctx1.fillRect(0,0,100,100)
在这里我们可以看到我是通过fillRect进行矩形的添加，起点坐标（0,0）结束坐标(100,100),（当然这里对参数的理解可能有误，希望有更好见解的前辈及时纠正)，然后我们运行结果展示：
我们可以发现，并不是说像我们想象的那样，生成的是一个正方形。所以我在这里也是百思不得其解。后来经过资料的查证后发现，canvas是具有一个默认的宽高比例（即300：150），而我们这里面的行内样式中的宽高虽然让canvas画布变大了，但是并没有改变它的比例。所以我们虽然是（0,0）到（100,100），但是实际上因为画布比例是二比一，所以我们的矩形的宽高也被压缩成了二比一。也就是说，实际上这一行画布的代码应该是：
<canvas width="300" height="150" id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas>
而我们如果将后面的style里面的宽高删除后，则呈现出这样的效果：
此时我们的添加的矩形的比例就对了。那么我还想让其宽高皆为500应该如何做，只需要直接修改width和height的值就行，但是需要注意的是，这里的width和height是指的画布自身的属性而不是样式中的属性值。
<canvas width="500" height="500" id="test2" style="background: red;"></canvas>
这样的话即可，为了更好的对比，我将两种同时展示出来。主要代码如下
<canvas id="test1" style="width: 500px; height: 500px; background: yellow;"></canvas><canvas width="500" height="500" id="test2" style="background: red;"></canvas>
var a=document.getElementById("test1")var ctx1=a.getContext("2d");ctx1.fillRect(0,0,100,100)var b=document.getElementById("test2");var ctx2=b.getContext("2d");ctx2.fillRect(0,0,100,100)
但是还存在一个问题，就是我插入矩形中，没有单位的100代表的距离是多少，而这里虽然比例相同了，但是宽度应该都是100，为何两个中的宽度又不太一样。希望有知道的前辈进行解答。十分感谢。
