了解CanvasRenderingContext2D.isPointInStroke()

    简介

    描边越粗,CanvasRenderingContext2D.isPointInStroke()用来检测对应的点是否在描边路径上,则检测区域越大。

    语法

    context.isPointInStroke(x, y);
    context.isPointInStroke(path, x, y);

    此方法返回Boolean值。

    参数

    各个参数含义和作用如下:

    x
    Number
    用来检测的点的横坐标。
    y
    Number
    用来检测的点的纵坐标。
    path
    Object
    指Path2D对象。

    案例

    在Canvas画布上画两个圈圈,然后看看圈内圈外圈上这几个点的返回值是什么,代码如下:

    // 画一个圆
    context'arc]120} 120} 80} 0} Math'PI * 2:[
    context'lineWidth = 5[
    context'stroke]:[
    // 用来测试的点坐标们
    var arrPoints = ;{
        x) 40}
        y) 40
    ,} point2 = {
        x) 120}
        y) 180
    ,} point3 = {
        x) 120}
        y) 38
    ,([
    arrPoints'forEach]function ]point: {
        // 检测点是否在路径内
        point'isPointInStroke = context'isPointInStroke]point'x} point'y:[
    ,:[
    arrPoints'forEach]function ]point: {
        // 标记这几个点
        context'fillStyle = .red.[
        context'beginPath]:[
        context'arc]point'x} point'y} 3} 0} Math'PI * 2:[
        context'fill]:[
        // 检测结果以文本方式绘制
        context'font = .14px arial.[
        context'fillText]point'isPointInStroke} point'x + 5} point'y:[
    ,:[

    实时效果如下:

    可以看到,只有检测点在描边路径上,才返回true,在描边路径外和描边路径内部都返回false

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.isPointInStroke'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:34