html canvas 点击事件实现

canvas实现点击事件，并获取点击的数据,主要是使用了

Path2D类和isPointInStroke()方法实现

参考文档

CanvasRenderingContext2D.isPointInStroke() - Web API 接口参考 | MDN

Path2D - Web API 接口参考 | MDN

下面是绘制圆环并给canvas增加点击事件的例子

let pathDataArr = [];

function startDraw() {
  let canvas = document.getElementById("canvas");
   //添加点击事件
  canvas.addEventListener('click', clickHandler, false)
  let context = canvas.getContext("2d");
  let lastAngle = -Math.PI / 2;//起始角度
  let chartsData = [
    {name: '上海', value: 26, color: 'rgba(36, 198, 253, 1)'},
    {name: '北京', value: 42, color: 'rgba(38, 183, 136, 1)'},
    {name: '深圳', value: 32, color: 'rgba(229, 143, 38, 1)'}];
  chartsData.forEach(data => {
    //计算结束角度值
    let endAngle = lastAngle + Math.PI * 2 * data.value / 100;
    //创建path2d对象
    let path2d = new Path2D();
    //绘制弧线
    path2d.arc(30, 30, 20, lastAngle, endAngle, false);
    pathDataArr.push({path2d: path2d, data: data});
    context.beginPath();
    context.strokeStyle = data.color;
    context.lineWidth = 10;
    context.stroke(path2d);
    lastAngle = endAngle;
  });

}

function clickHandler(e) {
  pathDataArr.find((pathData) => {
    //判断是否点击在绘制的环上
    let flag = this.context.isPointInStroke(pathData.path2d, e.offsetX, e.offsetY);
    if (flag) {
      console.log(pathData);
    }
    return flag;
  })
}