六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

canvas isPointInStroke isPointInPath

Admin | 2016-5-5 8:52:31 | ReadNums | 2048 | 标签 网页制作 | 打印本页
     

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


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日