canvas绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
第六步：绘制描边 =>ctx.stroke();
1. canvas绘图上下文context
- 上下文：是所有的绘制操作api的入口或者集合。
- Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。
- Context对象就是JavaScript操作Canvas的接口。
- 使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。
2. 基本的绘制路径
2.1canvas坐标系:
从最左上角0,0开始。x向右增大， y向下增大。
2.2设置绘制起点（moveTo）
ctx.moveTo(x,y);
x,y相对于canvas盒子的最左上角。
2.3绘制直线（lineTo）
ctx.lineTo(x,y);
x,y为起点的终点。
2.4 路径开始和闭合
开始路径：ctx.beginPath();
闭合路径：ctx.closePath();
注意：beginPath: 核心的作用是将 不同绘制的形状进行隔离， 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的路径可以进行分开样式设置和管理。
2.5 描边（stroke）
ctx.stroke();
