是否有一种本地方式在js中处理画布上的非矩形对象？

Question

我创建了一个由Bezier曲线制作的几个扭曲矩形的网格。每个矩形在图片上都有自己的颜色。

让我们说，我想为每个矩形添加悬停效果，因此我需要知道它的尺寸。由于我可以填充或描绘这个数字，我认为有一些方法可以得到它们，但我不确定。

这是矩形的例子：

所以问题是，在canvas API中是否有一些方法可以实现所需的效果？

Answer 1

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

请注意，如果您不使用Path2D对象，也可以使用isPointInPath(x, y)调用它，但它会检查当前正在绘制的路径（使用beginPath()声明）。< / p>

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>