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

Question

样式与脚本<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的矩形吗？

Answer 1

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

Answer 2

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