js 使用canvas 把一个圆等分成三份，并做成扇形按钮

 有时候我们经常碰到项目里面需要把一个圆等分成三份或者多份的扇形，并且能通过鼠标和扇形交互，并且精确得识别扇形的触发区域。那么这次给大家介绍一下这个一种简单办法，通过使用canvas+js来实现切把圆三份扇形。供各位参考，大佬手下留情勿喷。觉得有帮助请给个赞！

具体如下：，

1 html部分

首先建立一个有id得canvas画布，这里命名为canvas

 <div id="app">

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

  </div>

 2 js部分

此部分为2个要点，1.切分圆形，2.扇形设置鼠标识别区域 废话不多说上代码

var cv = document.getElementById("canvas");//获取当前canvas

    var ctx = cv.getContext("2d"); // 建立画布控制

    var x0 = cv.width / 2; // 圆心的x坐标

    var y0 = cv.height / 2; // 圆心的y坐标

    var radius = Math.min(cv.width, cv.height) / 2; // 圆的半径

    var startAngle = -Math.PI / 2; // 起始角度

    var step = Math.PI * 2 / 3; // 每个扇形的角度

    var colors = ["red", "green", "blue"]; //分成3种不同颜色扇形

    colors.forEach(function (value, index) {

     //这里开始切分扇形

      ctx.beginPath();

      ctx.fillStyle = value;

      ctx.moveTo(x0, y0);

      ctx.arc(x0, y0, radius, startAngle + index * step, startAngle + (index + 1) * step); 

      ctx.lineTo(x0, y0);

      ctx.fill();

      // 给圆形添加鼠标事件监听器

      cv.addEventListener('mousemove', debounce(handleMouseMove, 500));

    });

//重点

function handleMouseMove(event) {

      // 获取鼠标位置相对于画布的坐标

      const rect = canvas.getBoundingClientRect();

      const mouseX = event.clientX - rect.left;

      const mouseY = event.clientY - rect.top;

      // 定义圆形的中心点坐标

      const centerX = canvas.width / 2; // 圆形的中心点 X 坐标

      const centerY = canvas.height / 2; // 圆形的中心点 Y 坐标

      // 获取鼠标位置相对于圆形中心点的连线与水平线之间的角度

      const dx = mouseX - centerX;

      const dy = mouseY - centerY;

      let angle = calculateAngle(centerX, centerY, mouseX, mouseY)//当前角度是多少度

      const distance = Math.sqrt(Math.pow(mouseX - x0, 2) + Math.pow(mouseY - y0, 2));//判断当前鼠标相对圆中心点所在点位置距离

      if (distance > radius) return //判断是否在圆圈内（就是这个距离只要是大于园半径就不在）

 

      // 定义红色色扇形的角度区间

      const red_StartAngle = 0; // 红色扇形起始角度（0度）

      const red_EndAngle = 120; // 红色扇形结束角度（120度）

      // 定义绿色扇形的角度区间

      const green_StartAngle = 121; // 红色扇形起始角度（121度）

      const green_EndAngle = 240; // 红色扇形结束角度（330度）

      //定义蓝色扇形的角度区间

      const blue_StartAngle = 241; // 蓝色扇形起始角度（121度）

      const blue_EndAngle = 360; // 蓝色扇形结束角度（330度）

      // 判断鼠标位置在哪个扇形内

      if (angle >= red_StartAngle && angle <= red_EndAngle) {

        // 鼠标位置在蓝色扇形内

        console.log("鼠标位置在红色扇形内");

      } else if (angle >= green_StartAngle && angle <= green_EndAngle) {

        // 鼠标位置在绿色

        console.log("鼠标位置在绿色扇形内")

      } else {

        console.log("鼠标位置在蓝色扇形内")

      }

    }

  //角度计算函数

    function calculateAngle(center_x, center_y, mouse_x, mouse_y) {

      var dx = mouse_x - center_x;

      var dy = center_y - mouse_y;

      var angle = Math.atan2(dx, dy);

      var angle_degrees = angle * (180 / Math.PI);

      if (angle_degrees < 0) {

        angle_degrees += 360;

      }

      return angle_degrees;

    }

  //一个防抖代码

  function debounce(func, delay) {

      let timerId;

      return function () {

        const context = this;

        const args = arguments;

        clearTimeout(timerId);

        timerId = setTimeout(function () {

          func.apply(context, args);

        }, delay);

      };

    }

完毕！