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

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

路径操作有三种方法：

beginPath() 起始一条路径，或重置当前路径

closePath() 创建从当前点回到起始点的路径

isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

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

1、 beginPath()

Canvas 是基于 状态 绘制的图形，每一次绘制时，Canvas 会检测整个过程定义的 所有！ 状态，比如strokeStyle、lineWidth之类的状态值，当这个状态值没有被改变，

Canvas 就一直使用最初的值。当一个状态值被改变后， 如果不使用 beginPath() 将其路径分开， 后面定义的样式 就会覆盖掉前面定义的 ！！！

判断开始新路径的唯一标准 就是 beginPath() ！！

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

<script>
window.onload=function () {
let cans = document.getElementById("seventhC");
let ctx = cans.getContext("2d");

ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="#B946C6";
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="#3A4D94";
ctx.moveTo(0,100);
ctx.lineTo(200,100);
ctx.stroke();

//如果把 beginPath() 注释掉   Canvas的“后来居上”原则  就会替换掉之前设定好的样式

}
</script>

效果图：



2、 closePath()

这个方法主要是 将 我们最后一次设置的坐标点 与 第一次设置的坐标点 相连接 ， 并关闭了当前的路径，

在这里需要注意的一点是 closePath()仅仅只是“关闭路径”， 并不等于 “结束路径”！

还是刚才那个例子 ：



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

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

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

举个多边形的例子：

先随便画上几条线：

再使用closePath()  连接

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));
}

效果图：