html5的canvas知识总结（8）isPointInPath、isPointInStroke、解决canvas高分屏模糊、非零环绕原则

忘是亡心i 2022-05-12 06:58 394阅读 0赞

**1. **

**ctx.isPointInPath(80,80)：判断点是否在上面路径的区域内。**

**ctx.isPointInStroke(80,50)：判断点是否在上面路径的边缘线上。**

![70][]

![70 1][]![70 2][]

浏览器支持情况：

（1）Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari **支持 isPointInPath()** 方法。

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

（2）isPointInStroke支持情况：

![70 3][]

可以通过getImageData来替换isPointInStroke的不足，一个用stroke描边的方式绘制的图形，只有边线是有色的，通过getImageData判断某个点，是否透明，来判断该点是否在边缘线上。

![70 4][]

![70 5][]

data\[3\] 的值是128，所以该点在边缘线上。

isPointInPath方法采用了**非零环绕原则**：判断p点是否在一个区域内，从点p向外做一条射线（可以任意方向），多边形的边从左到右经过射线时环绕数-1，多边形的边从右向左经过时环绕数+1，最后环绕数不为0，即表示在多边形内部。

![70 6][]

第一步：按顺时针或逆时针给每个边画一个方向箭头；

第二步：点p向任意方向，做一条射线；

第三步：左、上方向的+1，右、下方向-1；

如果和不是0，就在区域中。

**2. 解决canvas高分屏模糊**

在分辨率比较高的屏幕，比如：iPhone6、iPhone6s、mac等屏幕，canvas绘制的是位图，会在分辨率高的屏幕产生模糊。

解决办法：

<canvas width="200" height="200" id="canvas1"></canvas>
    
    #canvas1 {
    
    width: 100px;
    
    height: 100px;
    
    border: 1px solid black;
    
    }

这样对于canvas来说，就是2:1比例的内容，分辨率会提高两倍。

[70]: /images/20220512/cd963b30de50437b879173b54934f908.png
[70 1]: https://img-blog.csdn.net/20180915153029902?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220512/7bf6ecd796cb44c2a593273c70dbd4c7.png
[70 3]: /images/20220512/9fba1b1da83b44759d7df7f8a9cf8951.png
[70 4]: /images/20220512/bb345652fa904b6ba2401b9655204ff6.png
[70 5]: /images/20220512/74fcf1c0b04945bc9ab0ff8e3644d7d9.png
[70 6]: /images/20220512/852b286aaac74fcbae4153ba034058bd.png