理解canvas路径

canvas路径和ps里面的路径差不多，在进行图形绘制时，先绘制出来图形的路径，然后再描边或者填充。
canvas路径还有子路径的概念,在某一时刻，canvas之中只能有一条路径存在，Canvas规范将其称为当前路径。然而这条路径可以包含许多子路径。而子路径，又是由两个或者更多的点组成的。
看下面代码
(···)
context.beginPath();

    context.rect(10, 10, 100, 100);
    context.stroke();

    context.beginPath();

    context.rect(50, 50, 100, 100);
    context.stroke();
(···)
上述代码调用`beginPath()`来开始一段新的路径，该方法会将当前路径所有子路径清除掉。调用`rect()`方法会向当前路径增加包含四个点的子路径。`stroke()`方法将当前路径的轮廓线描绘出来。
如果下一次不调用`beginPath()`，而是直接调用`rect()`方法，则会向当前路径添加多条子路径。然后调用`stroke()`方法，会向多个矩形描边，会重绘第一个矩形。