canvas 基本点理解

方法 beginPath() 定义了一个新的路径绘制动作的开始


beginpath 丢弃任何当前定义的路径并且开始一条新的路径


closePath()方法关闭一条打开的子路径。
如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
如果子路径已经闭合了，这个方法不做任何事情。
一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo


()方法来开始一条新的子路径。




getContext()方法用来返回一个环境对象，该对象导出一个二维绘图API。可以理解为它返回的是一个用


于在画布（canvas）上绘图的环境。其目前唯一的合法值为“2d”。


moveTo()方法可以把窗口的左上角移动到一个指定的坐标。moveTo(x,y)其中参数x和y分别是窗口新位置


的x和y坐标。出于安全因素，浏览器限制此方法使其不能把窗口移出屏幕。


stroke()方法绘制当前路径的边框。路径定义的几何线条产生后，其可视化取决于strokeStyle、


lineWidth、lineJoin、lineCap 和 miterLimit 等属性。和 stroke() 方法相对的是 fill()，该方法会


填充路径的内部区域而 stroke() 是勾勒出路径的边框。


路径与子路径


在某一时刻，canvas之中只能有一条路径存在，Canvas规范将其称为“当前路径”（current path）。然


而，这条路径却可以包含许多子路径（subpath）。而子路径，又是由两个或更多的点组成的。比方说，


可以像这样绘制出两个矩形来