如何在Canvas中添加事件

作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯定的是，事件在Canvas中并不是一个无法触及的事情。

一个傻瓜式的方式

我们都知道一个元素在触发一个事件时，其鼠标的位置基本处于该元素之上，那么我们就自然而然的想到通过当前鼠标的位置以及物体所占据的位置进行比对，从而我们就能得出该物体是否应触发事件。这种方式比较简单，我就不用代码演示了，不过既然我叫它傻瓜式的方式，很明显它不是一个有效的解决方式。因为物体所占据的位置并不一定是十分容易获取，如果是矩形、圆形等我们还能通过一些简单的公式获取其占据的位置，可是在复杂点的多边形，甚至是多边形的某些边是弧线的，显而易见，我们这时候再获取其所占据的位置时是一件极其复杂且难度极大的事情，所以这种方式只适合自己在做一些demo中使用，并不适用于大多数的情况。

一个较聪明的方式

既然上面这种方式碰壁了，那么我们只能另辟蹊径。在翻阅CanvasAPI的时候，找到了一个方法isPointInPath，貌似正是我们苦苦寻找的良药。

介绍isPointInPath

isPointInPath的作用：顾名思义，我们很直观的可以知道该方法用以判断点是否处于路径当中。

isPointInPath的入参出参：ctx.isPointInPath([path, ]x, y [, fillRule])，该方法的参数有4个，其中path和fillRule为选填，x和y为必填。我们依次介绍4个参数。

path：看到这个参数，我开始以为是beginPath或者closePath的返回值，很可惜的是这两个方法并没有返回值，在查阅了资料后，发现是Path2D构造函数new的对象。Path2D构造函数 具体用法。不过可惜的是该方法可能由于兼容性的问题，目前看了一些开源框架都还未使用。

x，y：这两个参数很好理解，就是x轴和y轴的距离，需要注意的是，其相对位置是Canvas的左上角。

fillRule：nonzero（默认），evenodd。非零环绕规则和奇偶规则是图形学中判断一个点是否处于多边形内的规则，其中非零环绕规则是Canvas的默认规则。想具体了解这两种规则的，可以自己去查阅资料，这里就不增加篇幅介绍了。

上面介绍完了入参，那么isPointInPath方法的出参想必大家都可以猜到了，就是true和false。

使用isPointInPath

上一节介绍完isPointInPath方法后，我们现在就来使用它吧。

先来一个简单的demo：

  const canvas = document.getElementById('canvas')  const ctx = canvas.getContext('2d')  ctx.beginPath()  ctx.moveTo(10, 10)  ctx.lineTo(10, 50)  ctx.lineTo(50, 50)  ctx.lineTo(50, 10)  ctx.fillStyle= 'black'  ctx.fill()  ctx.closePath()  canvas.addEventListener('click', function (e) {    const canvasInfo = canvas.getBoundingClientRect()    console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top))  })复制代码