且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《HTML5 canvas开发详解(第2版)》——2.12 检查一个点是否在当前路径

更新时间:2022-08-12 23:09:37

本节书摘来自异步社区《HTML5 canvas开发详解(第2版)》一书中的第2章,第2.12节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.12 检查一个点是否在当前路径

使用Canvas的isPointInPath()函数,可以方便地检测一个点是否是在当前路径中,代码如下:

context.strokeStyle = "red";
context.lineWidth=5;
context.moveTo(0, 0);
context.lineTo(50, 0);
context.lineTo(50,50);
context.stroke();

var isPoint1InPath1=context.isPointInPath(0, 0);
var isPoint1InPath2=context.isPointInPath(10, 10);
console.log("isPoint1InPath1=" + isPoint1InPath1);
console.log("isPoint1InPath2=" + isPoint1InPath2);
context.closePath();

由于第一个点(0,0)在当前路径中,因此控制台会输出true。由于第二个点(10,10)不在路径中,因此控制台会输出false。

提示
目前,这个函数不是在每种浏览器上都有效。每个新版本的浏览器都在不断地提高兼容性。开发者需要在浏览器中针对这个函数是否能被完全兼容进行测试。