Canvas 绘图的位置和大小好像不大对劲~

样式与脚本

<style>
    #canvas {
        width: 400px;
        height: 300px;
        border: 1px solid #999;
    }
</style>
<script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(100, 100, 100, 100);
    }
</script>

HTML部分

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

浏览器上所呈现的

为什么绘制出来的会是这个样子的，不应该是距离左边100px, 距离上边 100px, 宽高都为100px的矩形吗？

---

可能是浏览器自带的css的问题。（就是默认的margin，padding）
你可以加载reset css尝试一下。

---

canvas默认宽高为300*150，样式里定义其实是对他进行了缩放，所以一般是在canvas的属性上设置他的宽高

---

宽高是代表画布的大小，不代表他里面的坐标系的大小 感觉上是这样的
应该有个像素和坐标的比 或者规定这么大的画布里面坐标系的范围