这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
echarts、g2、f2、antV等等插件可以实现一些绚丽的报表，也有时我们仅仅需要一些朴实无华的效果。手写可能需要几十k就完事了。如果引入插件动辄可能需要几百个（特指echarts）；稍微了解一些canvas知识有助于我们截取那些有用的东西，或者干脆是自己造出属于自己的轮子。
画线
html标签
<canvas id="can" width="500" height="500">
不支持canvas
</canvas>
canvas标签只有width和height两个属性。当没有设置宽度和高度的时候，canvas会初始化宽度为300和高度为150
画线
canvas标签是在dom中渲染一块画布，我们要做的就是在画布中划拉。下面展示下用法（忽略3d）
const canvas = document.querySelector("#can");
const ctx = canvas.getContext("2d");//3d为webgl
ctx.beginPath()
ctx.moveTo(100,100);//移动到某个点；
ctx.lineTo(200,100);//中点坐标；
ctx.lineWidth = '10';//线条 宽度
ctx.strokeStyle = 'blue';//rgba(0,222,255,.5)
ctx.stroke();//描边
1、首先我们在dom中获取到画布标签。
2、然后通过getContext获取到画布上下文ctx；我们在画布上划拉的方法api都在上下文ctx中
3、moveTo方法确定画笔的起始坐标（画布左上角为0,0坐标点）
4、lineTo方法确定画笔停止的坐标。（画布起始坐标和停止坐标的连接线就是我们画出的第一条线）
5、stroke方法给我们画出的线条上色（果然还是跟真实的纸笔不同，画完之后没有颜色。需要额外上色）我们可以使用lineWidth设置线条的宽度。使用srtrokeStyle设置线条的颜色，默认为黑色。。
关键方法
上例中展示了画线的基础用法，涉及到关键方法如下：
1.ctx.beginPath();开始一个新的绘制；绘制多条线时使用。以表示属于两条不相干的线
2.ctx.moveTo(x,y);画笔移动到指定坐标，作为画笔的起始坐标；
3.ctx.lineTo(x,y) 画笔划拉到指定坐标
4.ctx.stroke(); 描边；给划拉的线上色
不能小瞧这个简单的画线，仅仅是这些东西足够完成canvas手动签名的效果了；大致思路如下：按下鼠标时开始一个新的绘制，并移动画笔到指定位置。移动过程中跟踪鼠标坐标并循环调用lineTo和stroke方法。效果如下：
