javascript - 有没有一种本地方法可以在 js 中处理 Canvas 上的非矩形对象？

Question

我创建了一个由几个用贝塞尔曲线制成的扭曲矩形组成的网格。图片上的每个矩形都有自己的颜色。

比方说，我想为每个矩形添加悬停效果，因此我需要知道它的尺寸。因为我可以填充或描边图形，所以我假设有某种方法可以获得它们，但我不确定。

这里是矩形的例子:

那么问题来了，canvas API中是否有一些方法可以达到我想要的效果？

Answer 1

是的，您可以使用 isPointInPath(Path2D, x, y)方法。

请注意，如果您不使用 Path2D 对象，您也可以仅使用 isPointInPath(x, y) 调用它，但随后它将检查当前正在绘制的路径(声明为beginPath()).

var ctx = canvas.getContext('2d');
var myPath = new Path2D();
myPath.bezierCurveTo(50, 100, 180, 10, 20, 10);
myPath.lineTo(50, 100);

function draw(hover) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = hover ? 'red' : 'green';
  ctx.fill(myPath);
}

canvas.onmousemove = function(e) {
  var x = e.clientX - canvas.offsetLeft,
    y = e.clientY - canvas.offsetTop;
  var hover = ctx.isPointInPath(myPath, x, y)
  draw(hover)
};
draw();

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