canvas isPointInStroke isPointInPath

Admin | 2016-5-5 8:52:31 | ReadNums | 765 | 标签 网页制作 |

　　在canvas制图中，有两个方法，分别是isPointInStroke和isPointInPath，下面为大家介绍如何使用。

　　一、isPointInPath方法

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

　　JavaScript 语法：

　　context.isPointInPath(x,y);

　　参数     　描述
　　x     　测试的 x 坐标
　　y     　测试的 y 坐标

　　代码示例：

　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.rect(20,20,150,100);
　　if (ctx.isPointInPath(100,50))
　　　　ctx.stroke();
　　}

　　二、isPointInStroke方法

　　要想判断点是否在一条直线上，得使用isPointInStroke。注意，是判断是否在线上，而不是范围内。

　　代码示例：

　　var canvas = document.querySelector('canvas');
　　var ctx = canvas.getContext("2d");

　　ctx.rect(10, 10, 100, 100);
　　ctx.stroke();
　　console.log(ctx.isPointInStroke(10, 10)); // true

　　再来一段代码

　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.rect(20,20,150,100);
　　if (ctx.isPointInStroke(169,22))　//false，该点专矩形范围内，但是不在线上，所以返回false
　　
    　　ctx.stroke();
　　};

问题未解决：我要在线咨询问题

上一篇：上一篇：canvas的文字出现乱码

下一篇：下一篇：canvas　getImageData outImageData