CanvasRenderingContext2D.isPointInStroke()

CanvasRenderingContext2D.isPointInStroke()是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

语法

boolean ctx.isPointInStroke(x, y);
boolean ctx.isPointInStroke(path, x, y);

参数

x
检测点的X坐标。
y
检测点的Y坐标。
path
Path2D 路径。

返回值

Boolean
一个布尔值，当这个点在路径的描边线上，则返回true，否则返回false。

示例

使用isPointInStroke方法

这只是一个使用 isPointInStroke 方法的简单的代码片段，用于检测一个点是否在路径的描边线上。

HTML

<canvas id="canvas"></canvas>

JavaScript

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

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

修改线面的代码，在线查看 canvas 的变化，并在你的控制台查看日至信息：

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(ctx.isPointInStroke(10, 10)); // true</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.isPointInStroke		 Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Path parameter (Yes) 31 (31) 未实现 (Yes) 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Path parameter ? ? 31.0 (31) ? ? ?

参见