大众计算机学习网

专门提供各种电脑教程

canvas isPointInStroke isPointInPath

Admin | 2016-5-5 8:52:31 | 被阅次数 | 2556

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