为什么canvas画布的宽高要设置在行间

canvas的默认画布大小为300×150，通常我们想要自定义宽高都是在canvas标签中设置的，类似于这样：

 <canvas id="line" width="600" height="200">

今天突发奇想地在style中用CSS代码中设置了画布的大小：

canvas {
width: 600px;
height: 200px;
}

在style设置宽高之后的效果

然后绘制的线出现了锯齿和模糊，当然小白开始怀疑是不是自己设置的线太宽了，结果发现设置为1的时候仍然处于模糊效果，并且设置线的高度大于150的时候会显示不出来:

  //画坐标轴
 ctx.beginPath();
  ctx.moveTo(0,0);
ctx.lineTo(0,200);
 // ctx.moveTo(0,200);
 ctx.lineTo(500,200);
ctx.stroke();

原本我以为是因为没加上moveTo导致起点不准确的原因，可是翻了资料明明发现默认起点就是上一条线的结束点呀，随后上网找度娘之后发现了原因：
这是因为，使用CSS设置画布的大小会导致画布按比例缩放你设置的值。（CSS只是设置canvas在屏幕的显示大小）
解决方法：在绘制之前，首先设置canvas的宽度

 var canvas = document.getElementById("line");
  var width = canvas.offsetWidth;
   //  计算画布的高度
  var height = canvas.offsetHeight;
  //  设置宽高
  canvas.width = width;
  canvas.height = height;

或者是一开始就在行内设置画布的宽高就可。

效果正常啦
参考文章1
参考文章2