canvas 的行内属性width、height与css的width、height属性差别

先贴上mdn上的解释

canvas具有两个行内的属性：width与height属性，同时如果使用css定义width与height属性；在解释这两类之间的差别之前先看一下作的测试：

css:
canvas {
   display: block;
   border: 2px solid gray;
   border-radius: 10px;
   width:800px;
   height:400px;
}
html:
<canvas id="cav"></canvas>
JS:
    <script>
        window.addEventListener("load", () => {
            var can = document.getElementById('cav');
            var ctx = can.getContext("2d");
            ctx.fillStyle = "rgb(0,0,255)";
            ctx.fillRect(0, 0, 200, 200);
        })
    </script>

显示的结果为：

从结果可以看到，我在css设置为800*400px的canvas，但是使用填充矩形的width*height：200*200；结果却是高度填满，宽度也不符合200/800的相对大小；使用chrome调试工具可以看出是canvas尺寸为css设置的尺寸

从这个测试的结果可以猜测出：

我们可以使用css设置设置canvas元素的像素的宽度和高度，但是我们在使用坐标系进行绘图时，使用的坐标系使用通过canvs行内属性设置的width和height，默认为300*150；也就是如果没有设置行内的width*height属性，使用canvasAPI进行绘图时整个canvs的坐标系在可见范围内是300*150，并不是css设置的像素尺寸；

为了验证可以再进行一个测试：

css:
canvas {
            display: block;
            border: 2px solid gray;
            border-radius: 10px;
            width:800px;
            height:400px;
        }
html:
<canvas id="cav" width="300" height="200"></canvas>

JS:
window.addEventListener("load", () => {
            var can = document.getElementById('cav');
            var ctx = can.getContext("2d");
            ctx.fillStyle = "rgb(0,0,255)";
            ctx.fillRect(0, 0, 150, 100);
        })

运行结果：

可以从结果看看出来：我们使用的JS代码绘图使用的是canvas中行内设置的width与height属性值作为绘图坐标系的基准尺寸（行宽都为行内的一半，结果显示也为canvas元素的一半，但不是css设置尺寸的一半），这也证实了上面的猜想

那么如果没有css定义的尺寸只是用行内元素的width与height进行尺寸设置呢？

经过测试：如果没有在css中使用css进行尺寸设定，会按照行内设置的width与height值以像素为单位进行尺寸设定，这样绘图坐标系的单位尺寸也就是像素（px）尺寸了。（这个就不贴代码了，的确做了测试）