概念介绍

beginPath方法小程序API中的解释为：开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

beginPath到底有啥用，用以下代码来说明这个问题。

    const ctx  = wx.createCanvasContext('myCanvas');
    ctx.setStrokeStyle('red')
    ctx.strokeRect(10, 10, 150, 100)

    //A路径
    ctx.beginPath();
    ctx.moveTo(30, 40)
    ctx.lineTo(100,40)
    ctx.setStrokeStyle('blue')
    ctx.stroke()//注释掉该行代码，A路径不会被画出来

    //B路径 
    ctx.beginPath();//注释掉该行代码，A路径会被绘制两次
    ctx.moveTo(30, 50)
    ctx.lineTo(100, 50)
    ctx.setStrokeStyle('red')
    ctx.stroke()
    ctx.draw()

这段代码绘制出的图像是一条蓝线和一条红线，这点毫无疑问。
我们做两个实验：
1、此时如果我们将A路径的ctx. stroke ()删除，则只会出现一条红色的线。原因是绘制的路径只有调用了fill或者stroke才会对路径进行填充或者描边，而此时B路径调用了beginPath，重新开了一条路径，A路径已经失效，所以A路径不会被绘制。

2、此时如果我们将B路径的ctx.beginPath()删除，不开启新的路径，直接接着绘制蓝线，则会出现：一条紫色的线和一条红色的线。
这是为什么呢？
原因是：第一点：stroke() 描绘的的路径是从 beginPath() 开始计算的
第二点：同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准
根据这两点，第一个stroke()方法读取到的最后设置的线条颜色是蓝色，首先绘制了一条蓝色的线，第二个stroke()方法最终读取到的线条颜色是红色，此时从beginPath开始，先绘制第一条线，绘制了一条红色的线，该直线和第一个stroke方法绘制的直线重叠了，显示了红色和蓝色重叠之后的颜色，接着又绘制了第二条直线，显示为红色。
在这里再说一个知识点：
fillRect与strokeRect这种直接画出独立区域的api，也不会打断当前的path路径。
fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。
stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。
也就是说fillRect和strokeRect方法有自己单独的定义域，不会被路径中的fill和stroke填充所影响，也不会打断当前路径的执行。
路径中调用fillRect和strokeRect方法绘制时，颜色取之前的距离他最近的一次颜色设置，跟路径中之后的颜色设置无关，fill和stoke方法不会将其重绘一次。