HTML5 Canvas 开发绘图方法整理【十二、Canvas重点之：路径】

川长思鸟来 2022-05-31 09:49 322阅读 0赞

#### Canvas 路径可以说是一个非常的 ！ 相当的！ 重要的东西，除了矩形，其他基本所有图形都是以路径为基础的。 ####

路径操作有三种方法：  
beginPath() 起始一条路径，或重置当前路径  
closePath() 创建从当前点回到起始点的路径  
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

beginPath() 和 closePath() 在画圆形的时候是必备的条件，其他图形有时候也需要

1、 beginPath()

Canvas 是基于 状态 绘制的图形，每一次绘制时，Canvas 会检测整个过程定义的 所有！ 状态，比如strokeStyle、lineWidth之类的状态值，当这个状态值没有被改变，  
Canvas 就一直使用最初的值。当一个状态值被改变后， 如果不使用 beginPath() 将其路径分开， 后面定义的样式 就会覆盖掉前面定义的 ！！！  
判断开始新路径的唯一标准 就是 beginPath() ！！

在Canvas中，大部分定义的样式如果被覆盖，都可以检查一下是否写在了同一个路径里。

效果图：  
![这里写图片描述][70]

2、 closePath()  
这个方法主要是 将 我们最后一次设置的坐标点 与 第一次设置的坐标点 相连接 ， 并关闭了当前的路径，  
在这里需要注意的一点是 closePath()仅仅只是“关闭路径”， 并不等于 “结束路径”！  
还是刚才那个例子 ：  
![这里写图片描述][70 1]

想要结束当前路径 只有 beginPath() 另开路径 这一个方法；

其实closePath() 的主要作用就是用来做 “封闭图形的 ”！

这个一般在画圆形的时候用的较多。

举个多边形的例子：

先随便画上几条线：

![这里写图片描述][70 2]

再使用closePath()  连接

![这里写图片描述][70 3]

3、 isPointInPath()  
isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。  
语法 ： ctx.isPointInPath(x,y); 测试的 x 坐标 和 测试的 y 坐标  
这个需要注意的是 不支持strokeRect() 和 ctx.fillRect() 这两个方法;  
如果一定要用的话请用 rect() 代替。

ctx.lineWidth="3";
            ctx.strokeStyle="#31F036";
            ctx.rect(20,20,100,100);
            ctx.stroke();
    
            if(ctx.isPointInPath(20,50)){
                //判断指定坐标是否在当前路径
                alert(ctx.isPointInPath(20,50));
            }

效果图：

![这里写图片描述][70 4]

[70]: /images/20220531/e589783f64d24697841a82a7f2910ba0.png
[70 1]: /images/20220531/e8a45d55e21f4ff68b28d6f85d60e403.png
[70 2]: /images/20220531/1388cda6e27741dca957430f2e9d8466.png
[70 3]: /images/20220531/9c2f821136dc4a26adadeb3c032e0cc6.png
[70 4]: /images/20220531/810edaecf5d04fe88b020ab303b54059.png