前言

作为前端开发人员，我们都知道Canvas是前端在可视化领域的一个利器，借助 Canvas我们可以实现许多绚丽的视觉效果，并且在一些渲染数量极多、内容复杂的场景下，其性能表现都有着非常大的优势。

然而Canvas有这一个缺陷，由于Canvas是作为一个画布来整体存在的，我们不能像dom元素一样对画布中存在的各种图形进行事件绑定，因此我们就需要只针对Canvas开发出一套事件系统，本文就对此进行简单的讲解。

获取坐标

虽然Canvas不支持为画布内的图形直接添加事件，但是我们还是可以对整个Canvas元素进行点击事件的监听，来计算出点击事件在画布中的位置

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  const point = { x, y }
})

在获取到了点击点的坐标以后，我们的问题就进行了转化，变成了如何判断一个点是否在图形的内部，这里我们常用的方法有两种，一种是基于几何图形位置判断的数学方法，一种是基于像素颜色的判断方法；其中数学方法即判断一个点是否在某个多边形中，有交叉数法和环绕数法，有兴趣可自行了解，本文着重讲解像素色值判断法。

像素色值判断法

在这种方案中，我们除了需要渲染一个用于展示的Canvas画布外，还需要离屏渲染一个专门用于检测点击所使用的hitCanvas。当我们绘制一个需要绑定点击事件的元素时，我们还需要生成一个唯一的颜色值，并使用该颜色将一个大小位置一样的图形绘制到hitCanvas当中。做好这一步后，当用户点击之后，我们就可以通过在hitCanavas上获取我们点击位置的色值，来直接找到是哪个图形被点击了。