基于SVG实现光晕效果

const path = new Path2D("M10 10 h80 v80 h-80 Z");

// 提取路径的命令和参数

const commands = path.toString().match(/[A-Za-z]\d+|[A-Za-z]/g);

// 计算路径的几何中心点坐标

let centerX = 0;

let centerY = 0;

for (let i = 0; i < commands.length; i++) {

 const command = commands[i];

 const params = command.substring(1).split(" ");

 switch (command[0]) {

   case "M": // 移动到起始点

   case "L": // 画直线

   case "T": // 平滑曲线

     centerX += parseFloat(params[0]);

     centerY += parseFloat(params[1]);

     break;

   case "Q": // 二次贝塞尔曲线

   case "C": // 三次贝塞尔曲线

     centerX += (parseFloat(params[0]) + parseFloat(params[2])) / 2;

     centerY += (parseFloat(params[1]) + parseFloat(params[3])) / 2;

     break;

   default:

     break;

 }

}

centerX /= commands.length;

centerY /= commands.length;

console.log("中心点坐标：", centerX, centerY);