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
