canvas子路径

代码段

 can2_context.beginPath();
 can2_context.rect(10,10,100,100)
 can2_context.stroke();

//  can2_context.beginPath()
 can2_context.rect(50,50,100,100)
 can2_context.stroke()

上面这段代码：先调用beginPath()来清楚当前路径中的所有子路径，然后调用rect()来创建一条包含矩形4个点的子路径，再调用stroke()方法使得这个矩形出现在canvas上。
接下来这段代码再次调用rect()方法，不过这一次，由于没有调用beginPath()方法清除原有的路径，所以第二次对rect()的方法的调用，会向当前中增加一条子路径。最后该段代码再一次调用stroke()方法。这次stroke()方法的调用，将会使得当前路径中的两条子路径都被描边，这意味着它会重绘第一个矩形
效果如图