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();