理解canvas路径

Posted 2021-01-04 mynodejs

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()方法，会向多个矩形描边，会重绘第一个矩形。